1.position的absolute与fixed共同点与不同点
相同点:(1)改变行内元素的呈现方式,display被置为block。(2)都脱离了文档流,不占据空间(3)默认会覆盖到文档流的上方
不同点:(1)absolute相对于定位了的父元素,fixed相对于浏览器窗口定位,滚动页面,元素相对于浏览器窗口的位置不变
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static;
is not positioned in any special way; it is always positioned according to the normal flow of the page:
position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;">A <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1 <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2 </div> </div> </div>
1)元素同时应用了position: relative、float、(top / left / bottom / right)属性后,则元素先浮动到相应的位置,然后再根据(top / left / bottom / right)所设置的距离来发生偏移。
position:absolute; 与float属性一样都会脱离文档流,这就带来一个相同效果;它们的包含元素的高度会坍塌为0;对于float属性可以清除浮动;
同时应用position: absolute和float: left会导致清除浮动无效(position: relative则可以清除浮动)。
position:absolute 还有坑没有踩平!!!!
如果绝对定位元素没有申明置入值,只申明了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 。