HTML - 溢出和位置绝对问题

Question

我有一个患有 margin-top 的 child 。为了正确应用margin-top，我需要为父级设置一个overflow auto。不幸的是，这个溢出自动会切断已经定位为绝对的重叠 child 。有变通办法吗？

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。

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

请参阅下面的原型(prototype)。

.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>