将绝对div定位在相对div到屏幕顶部

时间:2014-01-24 09:32:06

标签: html css responsive-design

我的结构中有许多相对位置div,而另一个div位于position: absolute内。现在我想在屏幕的左上角显示这个绝对位置div,覆盖移动设备的全屏幕作为叠加或对话框,用户也可以滚动此,叠加或对话框可以有表格。 固定位置不是解决方案。

我怎么能这样做?

<div class="relative">relative
<div class="absolute">absolute</div>

.relative {
    position:relative;
    margin-top:500px;
}
.absolute {
    position:absolute;
    top:0
}

编辑: JSFIDDLE

人们投票很快:)建议缓慢

更新

我不能使用负边距因为我不知道相对div的位置它可以在文档中的任何位置而且我不能使它成为身体的直接孩子

1 个答案:

答案 0 :(得分:1)

只是反击.relative元素的定位。在这里,.relative元素的margin-top为500px,因此我们可以通过指定-500px的.absolute来使top元素显示为500px以上:

.absolute {
    position:absolute;
    top:-500px;
}

JSFiddle demo