在H5中对一个元素进行定位有多种方式，现在普遍采用Flex布局，能很好的兼容浏览器和移动端，但早年间网页中的主要定位方式是采用Position的方式，同时在Flex布局中有时也需要配合使用Position的方式才能达到更好的效果，本文主要对CSS Position的布局方式进行讲解。
document flow
static
Document Flow文档流是CSS中的默认布局，对应position:static，块级元素独占一行从上往下排列，行内级元素则从左向右排列，元素不重叠且按照源码的顺序进行渲染显示，所以此时给元素设置top，bottom，left和right属性是没有作用的。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./styles.css" />
<title>CSS positions</title>
<style>
.container {
background-color: lightblue;
padding: 20px;
}
.container > div {
padding: 15px;
}
.container span {
margin-bottom: 20px;
}
.first {
background-color: lightgreen;
}
.second {
background-color: lightcoral;
}
.third {
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="container">
<span>Container</span>
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
</body>
</html>
relative
有时候文档流并不能满足需求，relative可以改变元素原来在文档流中的位置，且不影响其他元素的布局，通常配合top，bottom，left和right属性使用，且相对的是自己原来的位置。
.second {
background-color: lightcoral;
position: relative;
left: 20px;
}
relative定位的元素不会脱离文档流，依然会占据原来的位置，我们更改Second的布局如下：
.second {
background-color: lightcoral;
position: relative;
top: 30px;
left:20px;
}
可以发现
Three并没有顶上去占据Second的位置，这说明Second依然在文档流中，只是改变了自己的相对位置，relative是相对于自身的左上角顶点进行偏移的。
fixed
fixed布局就是相对于视口进行定位的，一般在实际开发中用于网页上不随鼠标滚动而改变位置的固定元素上，需要注意的是fixed布局的元素会脱离文档流，其他元素会顶替fixed元素在文档流中的位置。
.second {
background-color: lightcoral;
position: fixed;
left: 20px;
top: 70px;
}
由于
Second脱离了文档流，Three则向上移动占据了原来Second的位置。
Absolute
absolute定位则稍微复杂一点，它的定位基准是最近的祖先非static布局的定位元素（如fixed，relative和absolue），如果一个都没有则相对于视口定位（这就等同于fixed定位）。
.second {
background-color: lightcoral;
position: absolute;
left: 20px;
top: 70px;
}
此种情况没有找到最近的祖先非
static布局的定位元素，则相对于视口进行定位。
在实际开发中用的最多的是子绝父相，就是子元素采用绝对定位，父元素采用相对定位，由于相对定位使得父元素不会脱离标准流，当设置父元素为relative且不设置任何偏移时父元素不会有任何布局上的改变，但是成为了定位元素，子元素采用absolute定位后则会去找最近的定位元素，则会找到父元素，具体表现为子元素相对于父元素的左上角进行定位。
.container {
background-color: lightblue;
padding: 20px;
position: relative;
}
最近的祖先非
static定位元素其实有三个条件，首先必须是定位元素（只要不是static即可），其次是祖先元素（包括父元素，会一层一层父元素往上找），最后是最近的那个。
Sticky
sticky布局是relative和fixed二者的结合，会根据页面滑动的位置来在二种定位方式之间进行切换，一般在页面中实现类似tabbar吸顶的效果。sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果，原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
.container {
background-color: lightblue;
padding: 20px;
height: 300vh;
}
.second {
background-color: lightcoral;
position: sticky;
top: 0;
}
总结：
本位主要介绍了CSS Position的几种方式，最主要就是理解它们的基点是什么，才能更好的掌握这些定位属性，尤其是absolute定位元素其相对定位的元素需要满足的三个条件。
网友评论