这段时间公众号没更新，主要是因为一次项目的串讲，周末时间都在准备这次串讲，毕竟是第一次讲前端的内容，下了很大功夫把前端项目中用到的所有知识点「粗略」地讲了一下，共总结了32页pdf。经过这次串讲后，我便正式开始写前端业务，主要是App中使用的wap页面。万事开头难，起码前3个月不太好过，所有的东西都需要现学现卖。前面几篇文章「简单」地介绍了 CSS 布局，但是讲的太浅，发现真正在项目中使用的时候「力不从心」，今天再次学习 position 布局，争取搞懂它。
HTML中默认的布局方式是流式布局，也就是说浏览器会按HTML的书写顺序来布局，前提是不打破流式布局。下面这段代码是流式布局的效果。
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Position</title> <style> body { height: 1000px; } * { margin: 0; padding: 0; } .con { background-color: antiquewhite; height: 80px; width: 200px; } .div1 { background-color: aquamarine; height: 100px; width: 200px; }</style></head>
<body> <div class="con"></div> <div class="div1"></div></body>
</html>去除样式后的代码：
<!DOCTYPE html><html lang="en"> <head></head> <body> <div class="con"></div> <div class="div1"></div> </body></html>它的 DOM 结构如下，需要注意DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是 DOM 是保存在内存中的树状结构，可以通过 JavaScript 来查询和修改其内容。
最外层的是 html，然后是 body，body 里嵌套了 2 个 div 标签，这些标签我们并没有修改它的 position，默认是 static，也就是遵循流式布局。
最终它的效果是这样的：
但事实不是这样的，比如做一个下面的样式：
这种布局方式流式布局根本实现不了，需要通过 position 来实现上面类似的效果。我们一起分析下 position。
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
MDN
也就是说 position 可以使元素「打破流式布局」，把元素放到一个合适的位置，比如一直悬停在顶部的导航。我们使用 position 来实现上面的效果。在流式布局下，代码如下：
<body>
<div class="con"> <div class="icon"></div> <div class="title">File Transfer</div> <div class="des">position布局</div> <div class="time">10:00</div> </div></body>效果是这样的：
relative：相对布局，需要结合 top、bottom、left 和 right 配合使用，仅设置 position:relative 属性不管作用。它不会打破默认的布局的方式，只会在默认的布局方式发生偏移。把 des 选择器修改一下，发现 【position布局】这个div 脱离了流式布局，但并没有打破流式布局，只是流式布局的位置空出来了而已。向左移动了90px，向上移动了 60px，你也可以通过 right 和 bottom 控制来达到同样的效果。采用 relative 布局的元素，它的起点是它所在流式布局中位置的左上角，而 top、bottom、left 和 right 就是基于这点进行移动位置：
.des { position: relative; top: -60px; left: 90px; font-size: 16px; color: #666; background-color: palegreen;}
absolute：绝对布局，这种布局方式会使元素脱离原有的流式布局，打破原有的布局方式。把 des 选择器修改一下：
.des { position: absolute; top: 0px; left: 0px; font-size: 16px; color: #666; background-color: palegreen;}需要注意一点，使用绝对布局后，【position布局】这个div 脱离了流式布局，并移动到了左上角，原先的流式布局里也不再给这个 div 留有任何空间。对于 absolute 布局来说，它会找一个「参照物」来作为一个起点，选哪个「参照物」取决于它的祖先元素的 postion 属性，如果祖先没有设置postion属性，会依据默认的祖先（html标签）作为布局参考。下图就是依据 html 标签为参考。
如果把 des 的样式改为如下：
.des { position: absolute; bottom: 0px; right: 0px; font-size: 16px; color: #666; background-color: palegreen;}效果如下，发现它跑道做右下角，这个右下角其实是可视区域的右下角:
我们改一下「参照物」，把 con 对应的 div 的 position 改为 absolute：
.con { position: absolute; background-color: lightgray; height: auto; width: 100%;}结果如下：
fixed：它的作用就是把某个元素固定到某个位置，下面的代码实现导航不会移动，一直固定在顶部。
.top { position: fixed; z-index: 1000; background-color: cornflowerblue; height: 64px; width: 100%; color: white; font-size: 30px; text-align: center; vertical-align: middle;}
介绍完相对布局和绝对布局，我们即可实现上面提到的效果，看下面的代码：
.con { background-color: #F1F1F1; height: auto; width: 100%;}.icon { position: relative; top: 20px; left: 20px; background-color: aquamarine; height: 80px; width: 80px;}.title { position: relative; left: 120px; top: -50px; font-size: 20px; color: black; background-color: bisque; width: 50%;}.des { position: relative; left: 120px; top: -40px; font-size: 16px; color: #666; width: 50%; background-color: palegreen;}
.time { position: absolute; right: 10px; top: 30px; width: 40px; font-size: 16px; color: #666; background-color: blue;}<body> <div class="con"> <div class="icon"></div> <div class="title">File Transfer</div> <div class="des">position布局</div> <div class="time">10:00</div> </div></body>
推荐阅读：
图解前端
扫一扫
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
