Question

我有两个重叠的div：内容及其标题。示例已简化：

 .a {
   background-color: red;
   padding: 10px;
   position: relative;
 }
 .b {
   background-color: blue;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
 }

<div class="a">
  <div class="b">HEADER</div>
  CONTENT
  <br />CONTENT
</div>

JSFIDDLE：http://jsfiddle.net/mk6y1tbw/

是否有可能以某种方式确定内容将在b div下流动并且不会被'b` div隐藏？

P.S。 Div由第三方提供，我无法重新排列他们在HTML文件中的顺序或位置。

Answer 1

如果你真的需要position: absolute div b，请提出问题。使用正常定位无法达到相同的效果。通过向b类添加一些负余量，可以否定填充对a类的影响？使用正常定位的优势在于，您无需考虑<div>中b类内容的高度。

例如：

.a {
  background-color: red;
  padding: 10px;
}

.b {
  background-color: blue;
  margin: -10px -10px 0 -10px;
}

<div class="a">
  <div class="b">HEADER</div>
  CONTENT
  <br />CONTENT
</div>

Answer 2

只需将10px margin-top添加到第一个div，然后按如下所示从另一个div中减去它：

    .a {
        background-color: red; 
        padding: 10px;
        position: relative;
        margin-top:10px;
    }
    .b {
        background-color: blue;
        position: absolute;
        left: 0; top: 0; right: 0;
        margin-top:-10px; 
    }

<div class="a">
    <div class="b">HEADER</div>
    CONTENT<br />CONTENT
</div>

Answer 3

.a的填充不会为.b提供空间。将额外padding-top应用于.a：

.a { background-color: red; padding: 10px; padding-top:28px; position: relative; }
.b { background-color: blue; position: absolute; left: 0; top: 0; right: 0; }

小提琴：http://jsfiddle.net/mk6y1tbw/1/

28px是高度（在Chrome中呈现为18px - 请确保为height指定.b + + 10px默认填充。

文本围绕div流动，其位置为：absolute＆＃39;

3 个答案: