.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; }
section
的 margin-left
样式确保了有足够的空间容纳 nav
元素。
inherit
规定应该从父元素继承 position
属性的值。initial
设置该属性为默认值,详情查看 CSS initial 关键字。
注意观察当你调整浏览器窗口时发生了什么。效果很赞!
</section>如果你使用了一个固定定位的页眉或页脚,确保有足够的空间来显示它们!可以在 body 上面加了 margin-bottom
。
这个例子在容器比 nav
元素高的时候可以正常工作。如果容器比 nav
元素低,那么 nav
会溢出到容器的外面。之后我们会讨论下其他布局技术,它们都各有优劣。