position定位有哪些？各有什么特点？

我们在布局的时候经常会使用到position的属性，那么你真的完全了解它吗？

position概念

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

position属性值:

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

知识详解

Static

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

Relative

俗称的相对定位，重点在于对相对理解。我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。

strong { background: #808080; }

em { background: #ffd800; }

span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }strongemspan

请注意看，在这里我是有对span进行width属性的赋值（为100px）。但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）。

Absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值

可以看到（A-2）最终是根据body来产生了位移

从上面的图，我们可以总结以下几个结论。

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

2）元素设置了position:

absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。

特殊情况：

Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。

IE7下的表现更类似于float，会附加到父元素的末尾。

Fixed

在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：

1.会改变行内元素的呈现模式，使display之变更为block。

2.会让元素脱离普通流，不占据空间。

3.默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

问题1：相对定位与绝对定位的搭配使用效果？

答案：父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角，若无非static祖先，以初始包含块定位，在浏览器里，根元素的包含块（HTML）为初始包含块，只是一般情况下看上去像是body区域。

问题2：宽度设置为百分比是怎么使用的?

答案：1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。

2.如果一定要用div标签，一种方法是通过JS脚本获取浏览器高度或宽度然后给标签，用纯CSS方法，是这样：给login_wrapper加一条属性“position:absolute”。

问题3：百分比的应用场景？

答案：请点击