在html中 position默认值,CSS 中的 position 属性

可能对CSS 稍微有点了解的人都知道position这个属性，妈蛋不就一个position么，有毛可说的。可别小看position，position属性有那几个值，这个可是facebook 面试的第一个问题，你真能回答出来么？

文字前面简单介绍了基础内容，如果你有兴趣试着回答下后面成人版的问题。

儿童版

position属性有几个值只是开始，当你回答之后肯定会继续让你说一说详细的，但是首先你要说出有那几个值。

static

relative

absolute

fixed

sticky

还有一个inherit不放在一起是因为这个值的意思是继承父元素的属性，所以就不放在一起讨论了。

static

static为默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

这里要注意的是z-index只在定位的元素上生效，有时候你发现z-index无效很可能就是因为没进行position定位。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。位移后并不影响其他元素的位置。

一般不考虑兼容性的话推荐时候translate3d来进行位移。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

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

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

sticky

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

成人版

当position:absolute的所有父元素均为static的时候是相对于谁定位的呢？

当top bottom left right 同时出现会出现什么情况呢？

position:absolute 和 float 的区别是什么？

top:100% 和 left:100% 是相对于谁的，margin-left:100% 和 margin-top:100% 又是相对于谁呢？