position定位的方法和它们的特点。

大家好，我是IT修真院的学员，一枚正直纯洁善良的web前端程序员

今天给大家分享一下，position定位的方法和它们的特点。

1.背景介绍

position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

postion属性我们成为定位，有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。

2.知识剖析

position四种类型

（1）static: static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示

（2）relative：设置了relative相对定位属性后，元素会根据top，left，bottom，right进行偏移，且原本的空间仍然保留

relative，相对于其正常位置进行定位

（3）absolute： 元素设置成absolute后会脱离文档流，且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素,都会生成一个块级框，例如行内元素span设置了absolute后就可以设置height和width属性了。

absolute，相对于static定位以外的第一个父元素进行定位

（4）fixed: fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移

fixed，相对于浏览器的窗口进行定位

3.常见问题

绝对定位的重叠问题

元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。

4.解决方案

我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢， 这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0， 数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10

5.编码实战

6.它们的区别

使用absolute和fixed定位后，元素会脱离文档流；relative不会

7.参考文献

8.更多讨论

ppt

视频