顶部：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，以便元素重新计算其相对于其相对父级的维度。示例here。