技术频道


position css 布局实例

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

sectionmargin-left 样式确保了有足够的空间容纳 nav 元素。

</section>
<section> - 2

inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值,详情查看 CSS initial 关键字。

</section>
<section> - 3

注意观察当你调整浏览器窗口时发生了什么。效果很赞!

</section>
</div>
<div id="footer">

如果你使用了一个固定定位的页眉或页脚,确保有足够的空间来显示它们!可以在 body 上面加了 margin-bottom

</footer>
 

这个例子在容器比 nav 元素高的时候可以正常工作。如果容器比 nav 元素低,那么 nav 会溢出到容器的外面。之后我们会讨论下其他布局技术,它们都各有优劣。

CSS 布局扩展阅读:




发表评论