导语：web前端开发中用于设置定位方式的css属性position

欢迎关注！

position用于设置元素定位的方式，与top、right、bottom、left和z-index五个设置元素位置的属性配合使用，完成相关css布局任务。

position:releative

用于设置相对定位的元素，相对定位的元素仍在文档流中，按照文档流中的顺序进行排列，相对定位元素的参照为为元素本身，对于相对定位的元素，如果设置top属性为10px，则该元素相对于原来的位置向下移动10px，right、bottom和left与top一致。

设置相对定位常见的用法是将元素作为绝对定位的参照物，或者提升元素的层级（z-index）。

position:absolute

用于设置绝对定位的元素，该类型的元素默认宽度为内容宽度，并且脱离了文档流，参照物为第一个定位祖先或者是根元素（html元素）。相应的top、right、bottom、left值相对于的位置偏移是相对于参照物，而不再是元素本身。

position:fixed

用于设置固定定位元素，该类型的元素最大的特点就是参照物为视窗，脱离了文档流，默认宽度为内容宽度。position:fixed定位方式常用于设置页面遮罩。

top、right、bottom、left

这四个属性用于设置元素边缘与参照物边缘的距离，可以设置负值（如设置left的值为-100，如果元素的参照物为根元素，那么该元素就会跑到浏览器窗口外，无法正常显示）。如果同时设置了left和right，top和bottom，那么该元素会被拉伸。

z-index

该属性用于设置元素在z轴上的排序，默认值为0，可以设置负值，如果不设置将按照正常的文档流顺序显示（后面的元素在前面的元素之上）。

小结

position在css布局中是最常使用的属性之一，relative、absolute和fixed的区别在于定位祖先的不同，这就决定了position在不同的布局模式下的广泛使用，通常absolute的元素需要配合relative的元素来使用，因为position为absolute的元素脱离了文档流，需要relative的元素来锁定其定位的参照物。

下图是w3c组织css手册中规定的position全部取值

position可能取值

收藏转发请先关注，谢谢支持！

本文内容由小悦整理编辑！