html - 为什么不显示职位:绝对div？即使位于相对div的位置

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

最佳答案

这是您的问题：

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

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

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

关于html - 为什么不显示职位:绝对div？即使位于相对div的位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29151061/