html之position总结

后台开发过程中有时候需要调下前端什么的，比如几天前我们做项目的时候用了一个第三方js插件结果跟原有的产生了冲突，一个箭头的位置始终不对，我调了好久没调出来，蛋疼的紧。后来专业前端过来看了一会儿，加了个position和display就好了，看的我一脸懵逼。这些位置属性不总结真的难记，好多次被它搞迷糊，是时候好好总结下了：

position

1.position大家应该都不陌生，可以选用以下的值：
》absolute （相对父元素）
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
》fixed (相对浏览器)
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
》relative (相对自身偏移)
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
》static 默认值。（没有定位），元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
》inherit 规定应该（从父元素继承） position 属性的值。

所有主流浏览器都支持 position 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

旁白：其实相当清晰啊，动手试试加深记忆。

2.万万没想到，经过尝试这里有个深坑，可能对习惯安卓定位的朋友们产生一定影响：
1）相对于 static 定位以外的第一个父元素进行定位，这句话水很深，我就理解错了，为了避免有些人看差了记了错误的方式，我直接写正确的理解：

<body>

<div >
</div>

<div class="A" >
    <div class="B">
        <div class="C">xxx</div>
    </div>
</div>
</body>

》请问C加上position:absolute后相对于谁定位？
答案：body。wtf？原因：所有元素默认position:static。absolute会沿着节点往上检查，“static以外的第一个父元素”，这时候我们发现B，A都是static，所以它会选择相对body定位。

如果我们希望C相对于B定位，则需要给B加上position，并且不能是static。

display

刚好下班，待续。。

position

display

猜你喜欢