css中的position定位

在复习position定位属性，看到一篇介绍很棒的文章，所以转载记录一下。原文章地址点击跳转。

今天给大家分享一下，深度思考中的知识点——position定位有哪几种?各有什么特点?

一、背景介绍

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

二、知识剖析

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

三、知识详解

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

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

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

   已经很明显了，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道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后：
   
   对比一下，答案一目了然，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！

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

3. 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

   

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

4. 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属性是无效的。

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

原作者：Borvay
链接：https://www.jianshu.com/p/a116022c6c99
來源：简书