position(五种属性，以及每个属性的特点)

1. position: relative;相对定位

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）  （两个都为定位元素，后面的会覆盖前面的定位）

2. position: absolute;绝对定位

1> 使元素完全脱离文档流（在文档流中不再占位）

2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

6> 提升层级（同相对定位）

3. position: fixed;固定定位

  fixed生成固定定位的元素，相对于浏览器窗口进行定位。

4. position:static：默认值

默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5. position: sticky 粘性定位

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

6. position: inherit

规定应该从父元素继承 position 属性的值。

7. posiyion: initial

设置该属性为默认值，详情查看CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

 

 

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

二、知识剖析
position概念：
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍、博客或网站也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，各种垂直居中问题、弹性布局以及定位。
正如position is everything.
position属性值:
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky

三、知识详解
Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。

Relative
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我在学习CSS中迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：
(1) 初始未定位

 

图片.png

(2) 我们修改first元素的position属性：
相对偏移20px后：

 

图片.png

已经很明显了，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom等属性生效之前)进行的定位，这点一定要理解。

        小扩展
        那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin /
        padding属性会让该文档空间产生偏移吗？
        答案是肯定的，我们一起来做个试验吧：

(3) 添加margin属性：
设置margin：20px后：

图片.png

对比一下，答案一目了然，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！

同理，大家可以自己动手测下padding的效果！

 

Absolute
absolute定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absolut定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，
举个例子，a元素使用absolute定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(Note!一定要是直系祖先才算.），直到html根标签为止。
这里还需要注意的是，relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位。
但是呢，我们都知道html和body元素相差大概有9px左右。我们来看下效果：

(4) 添加absolute属性：
position: absolute;top :0;left : 0

 

图片.png

 

看了上面的信息后，细心的同学肯定要问了，为什么absolute定位要加 top:0; left:0; 属性，这不是多此一举吗？
其实我们加上这两个属性是完全必要的，因为我们如果使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

小扩展
既然absolute是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absolute定位中添加margin / padding属性：

 

图片.png

 

图片.png

 

结果很明朗了，祖先类的margin会让子类的absolute跟着偏移，而padding却不会让子类的absolute发生偏移。
总结一下，就是absolute是根据祖先类的border进行的定位。
Note : 充分了解Relative和Absolute的区别后，我们可以分析得出这个结论：(absolute)定位对象在可视区域之外会导致滚动条出现。而放置(relative)定位对象在可视区域之外，滚动条不会出现。这点在我们的前端页面制作中需要多加注意~~~

Fixed
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display之变更为block。
2.会让元素脱离文档流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

三、拓展知识
z-index属性：
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。

什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

作者：南木小屋
链接：https://www.jianshu.com/p/a116022c6c99
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。