CSS 中 position 属性详解
CSS中position 属性对应的值有 static、relative、absolute、fixed、sticky，在开发页面过程中会遇到元素的定位问题，那么如果我们了解了 position 属性的用处，在理清个值之间的区别之后，遇到需要定位处理的地方就不至于摸不清头脑了。
这里需要说明的是，如果设置了 position 属性，并且值不为 static ，那么元素可以设置对应的坐标属性 top | right | bottom | left 和 z-index ，记住哦，坐标属性只有在设置了 position 属性且值不为 static 的元素身上起作用。接下来我们将一一攻破 position 各项值的作用。
1. Static
position:static是元素默认的定位设置。不管开发者有没有设置此属性，元素都会在正常的布局流中。
注意看下面的代码
<body>
<div class="block-red"></div>
<div class="block-blue"></div>
</body><style>
body {
margin: 0;
}
.block-red{
position:static;
width:100px;
height:100px;
background-color:red;
}
.block-blue{
width:100px;
height:100px;
background-color:blue;
}
</style>
不管是否设置了 position:static 结果都是一样的
其实在没有定位需求的时候写不写 position:static都是无关紧要的。他只是元素定位的一个默认值而已。既然写不写都无所谓那就不写了吧，hiahia。
2.Relative
position:relative，元素相对于其自身最初位置的定位。元素不会从正常的布局流中删除。下面我们来给设置了 relative 属性的红色模块添加附加的属性 top:100px 和 left:100px设置。
.block-red{
position:relative;
width:100px;
height:100px;
background-color:red;
top:100px;
left:100px;
}红色方块相对于原来的位置分别移动了x=100px,y=100px，而蓝色方块位置不变
我们会发现设置了 relative 定位的红色方块原来的占位不变，而且蓝色方块并没有被其定位所影响
3.Absolute
position:absolute，他的参考点是最接近的一个设置了 position 属性的父元素（除了 position:static 的父元素），如果没有父元素或者没有被设置position 属性的父元素，html 元素会被当做参考点。当设置了 absolute 属性，那么此元素会从正常布局流中删除，其他元素的位置也会跟着受影响我们看一下下面的例子
现在我们将红色方块position 设置成 absolue观察一下
.block-red{
position:absolute;
width:100px;
height:100px;
background-color:red;
}<body>
<div>
<div class="block-red"></div>
<div class="block-blue"></div>
</div>
</body>
红色方块的坐标顶点会移到父元素的顶点，这里的父元素是 html
我们发现蓝色模块不见，而事实蓝色模块并没有消失，只是被红色模块遮挡，红色方块原来的占位不见了，它已经不在正常的布局流中，所以红色模块的定位设置影响了其他元素的正常布局。
这时我们再修改一下代码，在外围添加一个 div wrapper，并修改红色方块的left属性left:0px：
.wrapper{
background-color:#000;
width:300px;
height:300px;
margin-left:100px;
}
.block-red{
position:absolute;
width:100px;
height:100px;
background-color:red;
left:0px;
}
.block-blue{
width:100px;
height:100px;
background-color:blue;
}<body>
<div class="wrapper">
<div class="block-red"></div>
<div class="block-blue"></div>
</div>
</body>
我们发现，即使在添加了父级div 的情况下，红色方块并没有将父级div 当做参考点，而是把html当做参考点。
.wrapper{
position:relative;
background-color:#000;
width:300px;
height:300px;
margin-left:100px;
}此时我们会发现，设置了position 属性的 div 变成了红色方块的参考点了。
4.Fixed
fixed 和 absolute 类似，元素会从正常的布局流中删除。设置了 position:fixed 的元素参考点是浏览器窗口，他的位置不会随着页面的滚动而发生变化，在日常的开发中也是很常用的。我们看一下代码
.wrapper{
background-color:#000;
width:300px;
height:3000px;
margin-left:100px;
}
.block-red{
width:100px;
height:100px;
background-color:red;
}
.block-blue{
position:fixed;
top:0px;
left:200px;
width:100px;
height:100px;
background-color:blue;
}
我们发现不管页面如何滚动，蓝色方块的位置都不会改变，颇有一种管你们怎么变，反正我就在这里了你拿我也我没本法得感觉。
5.Sticky
position:sticky 属性，相当于 absolute 和 fixed 的叠加，我们来用实际代码来理解一下。修改一下代码红色方块和黑色方块不加 position 属性，给黑色方块设置一个可以滚动的高度，再给蓝色方块设置 position:sticky属性，再来观察一下：
.wrapper{
background-color:#000;
width:300px;
height:3000px;
margin-left:100px;
}
.block-red{
width:100px;
height:100px;
background-color:red;
}
.block-blue{
position:sticky;
top:0px;
width:100px;
height:100px;
background-color:blue;
}
.block-green{
width:100px;
height:100px;
background-color:green;
}<div class="wrapper">
<div class="block-red"></div>
<div class="block-blue"></div>
<div class="block-green"></div>
</div>
我们发现在页面没有滚动时，蓝色方块没什么变化，定位规则遵循 position:relative设置。当我们滚动页面至蓝色方块时，我们会发现，这时蓝色方块定位遵循 position:fixed设置，是不是很神奇呀。因为该属性比较新，浏览器兼容方面还不是很好，所以很少有人用，有兴趣的可以自己试一下。说到这里，有没有对 position 属性有一个清晰认识呢？当然如果想要更好的理解，还是要自己去实际操作。花不了半个小时，就会弄清楚的，为何不试试呢，对吧？
暂无数据- 为什么叫媛代码社区？
- 媛代码访谈第 3 期 | 大家好...
- 跟领导提加薪，领导说我还有上升空间...
- 天哪 居然让我发现这个好地方🤤
- 更新日志
媛代码社区微信公众号