Question

我有两个部分，第一部分使用位置相对，并且内部包含2个绝对子项，子项被覆盖。第2部分包含标题。

我想保持第1部分的位置相对流动，所以第2部分出现在下面。我理解位置绝对是在文档流之外的元素，但即使是相对父级也是如此？

如何让父母保持流动？

＆＃13;

.parent {
    position: relative;
}
.child  {
    color: white;
    position: absolute;
    width: 100%;
}
.child1 {
    background-color: red;
    z-index: 1;
}

.child2 {
    background-color: blue;
    z-index: 0;
}

＆＃13;

<div class="parent">
  <div class="child child1">block1</div>
  <div class="child child2">block2</div>
</div>

<div class="text">
  <h1>block below</h1>
</div>

＆＃13;

Answer 1

您只需设置父元素尺寸，即可以对其子元素进行设置。由于绝对定位的孩子被取消了常规流程，这意味着父母div不包含任何东西，因此它消失了＃34;。即：

schedule(dynamic)

和片段：

＆＃13;

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: Wheat;
}

＆＃13;

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: Wheat;
}
.child  {
    color: white;
    position: absolute;
    width: 100%;
}
.child1 {
    background-color: red;
    z-index: 1;
}

.child2 {
    background-color: blue;
    z-index: 0;
}

＆＃13;

如果您需要父div不退出正常流程，那么它应该是静态的：

＆＃13;

<div class="parent">
  <div class="child child1">block1</div>
  <div class="child child2">block2</div>
</div>

<div class="text">
  <h1>block below</h1>
</div>

＆＃13;

.child  {
    color: white;
    position: relative;
    width: 100%;
}
.child1 {
    background-color: red;
    z-index: 1;
    position: absolute;
}

.child2 {
    background-color: blue;
    z-index: 0;
}

＆＃13;

如何在文档流中保持相对定位的父级？

1 个答案: