position简介
CSS属性选择用于定位元素的替代规则，被设计为对脚本动画效果有用。是 CSS中常用的布局属性之一。
取值
static
该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的栈上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
关于inherit
在一开始查找position的相关资料中发现，有说position有五种取值的，即static 、relative、absolute、fixed、inherit。有说四种取值即static 、relative、absolute、fixed的。这。。。。
Paste_Image.png
那inherit到底是不是position的取值呢?
我去查了下 MDN。
QQ截图20170327225.png
全局值是什么？我又去查了下w3c。原来是CSS-wide keywords. 即所有CSS属性都接受的值。
好了，那看来属于position的值只有static 、relative、absolute、fixed了。（sticky是一个实验性的API，尽量不要使用它）
示例
我们来看看如何使用这四个属性。
static
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象。
relative(相对定位)
还是在文档流中，但是要动一下。怎么动呢？我来上代码演示下。
QQ截图e1.png
QQ截图e.png
我们看到1和2位置并没有因为红色方块的变化为变化，还是处在原来的位置。
fixed(固定定位)
这个属性是相对于viewport来定位的。
QQ截图f.png
QQ截图f1.png
通过代码可以看到，我将窗口调大后不管如何滚动红色方块都不会改变位置。当然fixed不在文档流中。
absolute（绝对定位）
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位。
下面的示例中，"Three" 元素不存在应用了定位的祖先元素，因此该元素相对于紧邻的祖先（iframe 中的 <body> 元素）绝对定位。
QQ截图a.png
等等，这是普通情况。我们来看一下极端点情况。
QQ截图q.png
父类都没有定位该相对于谁定位呢？我们来查下文档w3c,通过文档我们知道绝对定位的元素是相对于它的containing block来定位的。
所以上图代码中child在父类祖先类都没有定位的时候是相对于它的包含块定位的。
总结
- static 是默认值
- relative是相对自己定位的。
- fixed是相对于viewport 视口来定位的。
- absolute相对于最近的非 static 祖先元素定位的。如果祖先类都没有定位则相对于包含块定位。
position只是CSS布局中常用的属性之一，但包含的内容确实不少。这是我的一些认识，如果有错误的地方还请各位多多指点。
网友评论