HTML

Question

我有一个 child 和 margin-top。为了正确应用 margin-top，我需要 parent 的 overflow auto。不幸的是，这个 overflow auto 会切断重叠 children 已经定位的绝对。有解决办法吗？

js Fiddle

HTML

<div class="a"> </div>
<div class="b">
   <div class="overlap" ></div>
   <p>
    Lorem Ipsum, arula jkasds 
   </p>
</div>

CSS

.a {  
  position: relative;
  width: 100%;
  background-color: #005a73;
  height: 100px;
  overflow: auto;
}

.overlap {
  width: 50px;
  height: 80px;
  position: absolute;
  background: yellow;
  top: -60px;
  left: 20px;
}

.b {
  /*overflow: auto; */
  position: relative;
  width: 100%;
  height: 840px;
  background-color: #f7f7f7; 
}

p {
  margin-top: 50px;
}

Answer 1

以下是您可能会如何解决问题。

将您的常规内容包装在单独的 div (.wrap) 中并在其上指定 overflow: auto。

这样，您仍然可以根据需要调整绝对定位元素并获得您需要的overflow/scroll效果。

请参阅下面的原型。

.a {
  position: relative;
  width: 100%;
  background-color: #005a73;
  height: 100px;
}
.overlap {
  width: 50px;
  height: 80px;
  position: absolute;
  background: yellow;
  top: -30px;
  left: 20px;
}
.b {
  position: relative;
}
.b .wrap {
  overflow: auto;
  width: 100%;
  height: 100px;
  background-color: tan;
}
p {
  margin-top: 10px;
}

<div class="a"></div>
<div class="b">
  <div class="overlap"></div>
  <div class="wrap">
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
  </div>
</div>

HTML - 溢出和位置绝对问题

HTML - overflow and position absolute issue

css

css-position

overflow