position是什么意思？用法、例句(前端入门——定位（position）)

很多朋友对于position是什么意思？用法、例句和前端入门——定位（position）不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

1、css中的定位，是布局中常用的一种方法，它可以使html元素脱离文档流，重新定位。语法如下：

2、position:static|relative|absolute|fixed

position有四个值，static（默认静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），通常配合left、top及z-index属性使用（static除外）。

3、静态定位很简单，html元素默认就是静态定位，和正常情况下html元素在文档流中的排版一样。left、top和z-index属性对应静态定位来说不起任何左右，如下图示例：

4、图1中的模块1，虽然设置了position:static,但是其表现和没有设置是一样的，按照标准文档流进行排版。

5、相对定位是html元素相对于它原来在标准文档流中的位置来定位的。如果不设置top、left的话它和静态定位一样，不同之处就是它可以设置top、left和z-index属性，如下图示例：

6、图3中模块2使用了相对定位，脱离正常的文档流，相对于原始位置左边50px，顶部30px，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有偏移。

7、相对定位的元素宽度默认和块级元素一样，宽度100%；

8、绝对定位时当父级元素也是定位元素（包括相对定位、绝对定位、固定定位）时，它就相对于父级元素的左上角定位，如果父级元素没有定位或者是静态定位，那就相对于浏览器窗口左上角定位。如下示例：

9、图5中模块3和模块2-1都设置为绝对定位，模块3的父级没有定位，模块2-1的父级是模块2（相对定位）。所以模块3相对于页面左上角位置定位，模块2-1相对于模块2左上角定位。

10、绝对定位不保留原来的位置，完全是脱离文档流，且其宽度变成不是100%（类似行内元素），它通常都是和有定位的父级元素一块使用才有意义。

11、固定定位，通俗讲就是固定到屏幕上，它和绝对定位一样完全脱离文档流，不保留原来的空间位置。唯一的区别就是它是始终都是相对于浏览器窗口左上角定位，不管其父级元素设置了定位。如下示例：

12、图7中模块4的设置为固定定位，它的父级时模块2（相对定位），可以看出和模块2-1（绝对定位）的区别，模块4不是相对于父级的。

13、再看下面这个示例，当滚动滚动条时模块4始终定在那块不动。

14、注意看上面图8中，模块4显示在模块3下面，看下图模块3的z-index明明比模块4的小，为什么会显示在模块4上面？

15、原因是模块4的父级模块（相对定位），它的z-index是100和模块3相同，又因为模块3元素在模块2元素后面，所以模块3显示在模块4上面，如果把模块2的z-index改成101，如下图：

16、模块4显示在模块3上面了，所以z-index的属性是同级元素相互进行比较大小。

17、在网页布局中，定位在早期使用较多，现在不建议过多使用定位，只有在特殊情况下使用，比如返回顶部按钮效果，或左侧导航栏，菜单栏固定定位，不跟随页面滚动等。

18、默认行为；元素按顺序堆叠并相互了解

19、相对于最近的非静态(fixed,relative,absolute)元素定位

20、感谢关注，欢迎指正错误及补充。

好了，文章到这里就结束啦，如果本次分享的position是什么意思？用法、例句和前端入门——定位（position）问题对您有所帮助，还望关注下本站哦！