流式布局无法满足某些需求，比如某个文字就要固定到网页中的某个位置，这时候就必须通过某种方式来打破流式布局，也就是说通过某种方式，把按流式布局的元素让其脱离流式布局，寻求另外一种新的布局方式。流式布局：
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <title>Basic document flow</title>
<style> body { width: 500px; /* 下面这句话竟然能居中 */ margin: 0 auto; }
p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; }
span { background: red; border: 1px solid black; }
.positioned { background: yellow; }</style></head>
<body> <h1>Web布局方式</h1> <p>我是一个 p 标签</p> <p class="positioned">我也是一个 p 标签</p> <p>我还是一个 p 标签</p> <p>我是 p <span>我是 span 标签</span> and <span>我是 span 标签</span> 哈哈</p>
</body>
</html>
通过 position 的方式可以打破流式布局，它支持的值有：static，relative，absolute，fix 和 sticky。
static：默认值，它遵循流水布局；
relative：相对布局，需要结合 top、bottom、left 和 right 配合使用，仅设置 position:relative 属性不管作用。它不会打破默认的布局的方式，只会在默认的布局方式发生偏移。修改上面的postioned 的样式：
.positioned { position: relative; top: 30px; left: 20px; background: yellow;}预览后发现黄色的标签会「在流式布局的基础上」向左偏移了 30px，向上偏移了 20px，效果如下：
absolute：绝对布局，这种布局方式会 使元素脱离原有的流式布局。修改上面的 postioned 的样式：
.positioned {
position: absolute;
top: 30px;
left: 20px;
background: yellow;
}
预览样式如下，黄色的标签会脱离「流式布局」。
以哪个元素作为「参考元素」，取决于它的祖先元素的 postion 属性，如果祖先没有设置postion属性，会依据默认的祖先（html标签）作为布局参考。上图就是依据 html 标签为参考。修改 body 的样式为，让黄色的元素把 body 作为「参考元素」：
body {
width: 500px;
/* 下面这句话竟然能居中 */
margin: 0 auto;
position: relative;
}
预览效果如下：
fix：它的作用就是把某个元素固定到某个位置，比如把下面的标题「Web布局方式」始终固定到顶部，无论如何滑动都不会改变其位置。
sticky：它的作用是在某个位置固定某个元素的位置，比如滑动到某个位置后，让其固定。
大家加油！！！
参考：
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
推荐阅读：
图解前端
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
