没有为 position: absolute 元素赋予 left、top 等值,与赋予 left:0; top:0; 的效果为何不一样?
的有关信息介绍如下:
感谢邀请。
如果一个元素的 'position' 特性值不是 "static"(默认元素不申明position即为static),该元素被称为定位元素。定位的元素生成定位框,其定位基于四个特性(置入值):'top','right','bottom','left'。
如果元素是绝对定位(Absolute positioning),并且申明了置入值(left\right\top\bottom),那么其定位的参照物即为其包含块,可能是父元素,也可能不是父元素。
关于包含块(Containing block )更详细的介绍:http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
参见其中的第4条:
即如果绝对定位元素申明了置入值,那么其置入值的参照物即为最近的申明了"position"为"absolute\relative\fixed的祖先元素。注意这里是置入值的参照物。
如果绝对定位元素没有申明置入值,只申明了position:absolute,那么其自身定位以及margin的参照物即为其最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的 内容框。
如果同时申明了置入值和margin值呢?看如下代码:
<div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>
你会发现元素本身距其包含块(这里是body,跟LZ DEMO一个性质)的距离是margin-left+left=300px 。动手试试吧!
同时必须指出“如果不给它设置left和top等值的话,它就相当于没有宽带的浮动元素。”这句话是错误的,浮动元素和绝对定位元素是2种不同的文档流,浮动元素会对其他元素造成影响,但绝对定位元素完全脱离文档流,不对其他元素造成影响。
更详细的阅读《定位体系概述》:



