html - 顶部：0px；底部：0px；没有按预期工作

Question

为什么以下不显示 200px 高的蓝色块？

<div style="position: absolute; height: 500px;">
    <div style="width: 200px; height: 300px; background-color: Green; position: relative;">
        a</div>
    <div style="width: 200px; background-color: Blue; top: 0px; bottom: 0px; position: relative;">
        b</div>
</div>

Answer 1

具有相对位置的元素的位置属性（上、左、右、下）表示与其当前位置的偏移量。您在相对定位的元素上设置顶部和底部 0。你基本上告诉它无处可去。

Answer 2

您没有在 div 上设置高度，唯一设置高度的 div 将其设置为 500px

另外，您期望顶部和底部以什么方式工作...您已经说过它们没有按预期工作，但是它们在那里是为了从左上角设置位置。

该属性指定元素的顶部位置，包括内边距、滚动条、边框和边距。

引自：http ://www.w3schools.com/jsref/prop_style_top.asp

附带说明的是，您不需要将 px 放在那里top:0; bottom:0;

Answer 3

应将位置设置absolute为元素以重新计算其相对于其相对父级的尺寸。这里的例子。