position css 布局实例
通过具体的例子可以帮助我们更好地理解 “position”。下面是一个真正的页面布局。
CSS position Sample
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 75px;
background-color: honeydew;
width: 100%;
z-index:999;
}
body {
margin-bottom: 120px;
}
<div id="container">
<section> - 1
<section> - 2
<section> - 3
</div>
section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。
inherit 规定应该从父元素继承 position 属性的值。initial 设置该属性为默认值，详情查看 CSS initial 关键字。
注意观察当你调整浏览器窗口时发生了什么。效果很赞！
</section>
<div id="footer">
如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！可以在 body 上面加了 margin-bottom 。
这个例子在容器比 nav 元素高的时候可以正常工作。如果容器比 nav 元素低，那么 nav 会溢出到容器的外面。之后我们会讨论下其他布局技术，它们都各有优劣。