为什么赢得了一个职位：绝对的div出现了？即使它处于相对div的位置

Question

这里是JSFiddle： http://jsfiddle.net/0jrzz1gw/

为什么输出显示This is A4？

＆＃13;

＆＃13;

#a {
    position: relative;
    background-color: green;
}
#a1 {
    position: relative;
    background-color: blue;
}
#a2 {
    position: relative;
    background-color: blue;
}
#a3 {
    position: relative;
    background-color: beige;
}
#a4 {
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

＆＃13;

<div id="a">This is Div 1
    <div id="a1">This is A1</div>
    <div id="a2">This is A2</div>
    <div id="a3">
        <div id="a4">This is A4</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

然后，同样奇怪的是，为什么代码会显示出来 经过这个简单的修改后This is A3： http://jsfiddle.net/0jrzz1gw/1/

＆＃13;

＆＃13;

#a {
    position: relative;
    background-color: green;
}
#a1 {
    position: relative;
    background-color: blue;
}
#a2 {
    position: relative;
    background-color: blue;
}
#a3 {
    position: relative;
    background-color: beige;
}
#a4 {
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

＆＃13;

<div id="a">This is Div 1
    <div id="a1">This is A1</div>
    <div id="a2">This is A2</div>
    <div id="a3">
        This is A3
        <div id="a4">This is A4</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你的问题：

top: 0;
left: 0;
right: 0;
bottom: 0;

您已将顶部，左侧，右侧和底部设置为0，这意味着该元素的大小为0 x 0px。

＆＃13;

＆＃13;

#a {
    position: relative;
    background-color: green;
}
#a1 {
    position: relative;
    background-color: blue;
}
#a2 {
    position: relative;
    background-color: blue;
}
#a3 {
    position: relative;
    background-color: beige;
}
#a4 {
    position: absolute;
    background-color: red;
    overflow: auto;
}

＆＃13;

<div id="a">This is Div 1
    <div id="a1">This is A1</div>
    <div id="a2">This is A2</div>
    <div id="a3">
        This is A3
        <div id="a4">This is A4</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我普遍怀疑你对相对绝对定位的定义感到困惑。与相对位置不同，绝对定位的元素从文档流程中取出，并且不会有助于计算父级的维度。

关于你的第一个问题，原因很简单，因为当你绝对定位一个元素时，它会从文档流中删除（参见上面的解释）。由于#a3是父项的唯一子项，因此父项的维度将折叠为零，子项也将如此。

要解决此问题，请指定高度：

#a {
    position: relative;
    background-color: green;
}
#a1 {
    position: relative;
    background-color: blue;
}
#a2 {
    position: relative;
    background-color: blue;
}
#a3 {
    position: relative;
    background-color: beige;
    height: 100px;
}
#a4 {
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

<div id="a">This is Div 1
    <div id="a1">This is A1</div>
    <div id="a2">This is A2</div>
    <div id="a3">
        <div id="a4">This is A4</div>
    </div>
</div>

---

关于您的第二个问题，#a3中有一个文本节点，因此该元素不会崩溃。但是，由于您已将子#a4设置为绝对定位，并将四个坐标（顶部，左侧，底部，右侧）全部设置为零，因此您实际上强制绝对定位的子项覆盖父级完全，因此模糊了下面的所有内容。您可以看到，如果我强制将父级拉伸到100px，#a4也将覆盖所有100px。

#a {
    position: relative;
    background-color: green;
}
#a1 {
    position: relative;
    background-color: blue;
}
#a2 {
    position: relative;
    background-color: blue;
}
#a3 {
    position: relative;
    background-color: beige;
    height: 100px;
}
#a4 {
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

<div id="a">This is Div 1
    <div id="a1">This is A1</div>
    <div id="a2">This is A2</div>
    <div id="a3">
        This is A3
        <div id="a4">This is A4</div>
    </div>
</div>