css的position属性值有哪些？有何区别？

css的position属性值有哪些？有static、inherit、relative、absolute、fixed，都是用来规定元素的定位类型，还有一个z-index属性，虽然不是position属性的值，但是经常会搭配position属性使用，用来控制定位元素的堆叠顺序。

position属性的值有何区别？

position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

光看定义，很多新手网友可能已经看晕了，别急，范如乐下面展开来讲：

static：

static是默认值，也就是没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。详情点击：《css的position:static是什么意思？有什么作用？》。

inherit：

inherit是规定应该从父元素继承 position 属性的值。这个也很容易理解，比如A元素里面包含一个B元素，如果B元素写上了position:inherit;，则会继承A元素的position 属性的值。有关父元素的详细内容请点击：《html中的父元素、子元素、兄弟元素是什么？》。

relative：

position:relative是相对定位的意思，如果某元素添加了position:relative属性，会把该元素设置为相对定位，该元素会变成一个有框的空间，那么，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。详情点击：《css的定位属性position:relative是什么意思？怎么用？》。

absolute：

position:absolute指的是绝对定位的意思，设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。详情点击：《css的定位属性position:absolute是什么意思？怎么用？》。

fixed：

position:fixed指的是固定定位的意思，如果某元素添加了position:fixed属性，会把该元素设置为固定定位，该元素会变成一个有框的空间，简单理解就是，添加了position:fixed属性的元素，会浮起来，相对于浏览器窗口进行定位。详情点击：《css的定位属性position:fixed是什么意思？怎么用？》。

z-index属性：

z-index属性设置元素的堆叠顺序，当你想要控制某个元素的堆叠顺序时，需要用到z-index属性，简单理解就是：我们知道平面的轴是x和y，x控制水平的方向，y控制垂直的方向，那么z轴，就是立体的那条轴，控制上下的方向。详情点击：《z-index属性的作用是什么？怎么用？》。

学会了控制元素的位置，接下来，就要学习控制元素的大小了，也就是宽度和高度，详情点击：《css设置宽高用什么属性？用width和height属性》。