html - 为什么位置 :absolute div show up? 不会，即使它位于相对 div 的位置

Question

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

为什么输出不显示This is A4？

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

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

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

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

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

Answer 1

这是你的问题:

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

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

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

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