Question

我有一个margin-top的孩子。为了正确应用margin-top，我需要为父级overflow自动。不幸的是，这种溢出自动会切断已经定位绝对的重叠儿童。有工作吗？

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。

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

见下面的原型。

＆＃13;

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

＆＃13;

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

＆＃13;

HTML - 溢出和位置绝对问题

1 个答案: