css - 使用 css 将 div 标签放在标签上

Question

我有以下由两个标签组成的代码。.nav并且.page我想将其放在.nav顶部position: fixed和.page下方.nav。我如何在不使用margin属性的情况下做到这一点？

这是jsfiddle

这是代码

 <div class="nav">this is navigation</div>
 <div class="page">this is page</div>

CSS

 .nav {
display: block;
position: fixed;
border: 1px solid red;
height: 50px;
width: 100%;
}

.page {
border: 1px solid green;
height: 300px;
}

Answer 1

那么，你可以使用相对定位吗？如果未设置，这会将“页面”元素定位为显示应该显示的位置的 50 像素。额外的好处是，“page”元素中的所有绝对定位元素都将引用“left:0px;top:0px”作为页面元素的左上角，而不是浏览器视口。

请参阅http://jsfiddle.net/HBxNr/1/上的小提琴

position:relative;
top:50px;