css面试点-position属性

position有四个属性值：relative、absolute、fixed、static。三个不常用的：inherit、initial、sticky、unset

• 不设置Position的值，top，left，right，bottom，不起作用，但是设置了position:static也不会起作用。
• 通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

static：这是position的默认值，也就是不设定position或者设定position:static都不会对这个div（或者别的标签）的布局有影响，它会在它原本应该在的位置。所以无论设置不设置position:static，top，left，right，bottom，都不会起作用。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。

relative：对象遵循正常文档流，相对定位。将依据top，right，bottom，left等属性在正常文档流中偏移位置。left和right同时存在，仅left有效，当top和bottom同时存在仅top有效。relative的偏移是基于对象的margin左上侧的。注意：display设置为table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是无法应用position: relative的，这也很好理解，这些表格类元素如果会相对于正常位置偏移的话不是很奇怪么！

absolute：对象脱离正常文档流。绝对定位。使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位元素的margin之间也不会发生折叠。
当父级元素的position属性值为默认值时（static），也就是没设置position:relative，absolute是相对于浏览器窗口（父元素为html）进行定位的。

fixed：对象脱离正常文档流。使用top，right，bottom，left等属性以浏览器的窗口为参考点进行定位。当出现滚动条时，对象不会随着滚动，IE6以下不支持该属性。

inherit： 规定应该从父元素继承 position 属性的值。ie7及以下版本不支持此属性

sticky：css3新属性，磁贴定位。它的表现就像position:relative和position:fixed的合体:

initial：设置positon的值为默认值(static)。ie不支持此属性。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性，不是postion特有的。

unset：设置positon的值为不设置：

• 如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
• 如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static)，该值等同于 initial

当把一个元素position属性设置为absolute或fixed的时候，会发生三件事：

1. 把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。
2. 该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如 ，设置 absolute 之后发现它可以设置宽高了）。
3. 如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。