行内元素的情况
结论:一个非根元素,如果是绝对定位,则它的包含块设置为离它最近的position值不是static的祖先元素。
如果这个祖先元素是块级元素,包含块则设置为该祖先元素的边框的内边界。
如果这个祖先元素是行内元素,包含块则设置为该元素的内容边界。以从左向右读的语言为例,该元素的上、左边界是其祖先元素中第一个框内容区的上、左边界;该元素的下、右边界是其祖先元素中最后一个框内容区的下、右边界。
三、浏览器对作为定位元素的内联元素的处理
对于块级元素,无论是否定位,元素均作块级元素处理,而行内元素绝对定位时,当做块级元素处理。假如有如下HTML:
<div class=”wrapper padding”>
<span class=”father p_r”>相对定位的行内父元素.相对定位的行内父元素.相对定位的行内父元素.<a href=”#” class=”p_a”>绝对定位的行内子元素.绝对定位的行内子元素.</a>相对定位的行内父元素.相对定位的行内父元素.相对定位的行内父元素.
</span>
</div>
<div class=”wrapper p_r”>
<span class=”father margin” id=”p_a” style=”width: 90%; height: 80px; “>绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.<a href=”#” class=”p_a” >绝对定位的行内子元素.绝对定位的行内子元素.</a>绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.绝对定位的行内父元素.
</span>
</div>
给它添加如下样式:
.wrapper { background-color: #DDD; width: 400px; height: 100px; }
.father { background-color: #CCC; border: 1px solid red; }
.p_r { position: relative; }
.p_a { position: absolute; top: 10px; left: 10px; }
#p_a { position: absolute; }
.margin { margin-left: 20px; margin-top: 20px; }
.padding { padding-left: 20px; padding-top: 20px; }
所得效果截图:

结论:
相对定位时,作为内联元素处理。
绝对定位时,作block元素处理(可设置宽高)。
四、定位元素的宽高
1、相对定位的情况:
HTML结构:
<div class=”father”>
<div class=”child position_r” style=”top: 10px; right: 10px; bottom: 10px; left: 10px;”>相对定位元素</div>
</div>
<div class=”father”>
<span class=”father”><span class=”child position_r” style=”bottom: 10px; left: 10px; width: 100%;”>相对定位的内联框</span>包含块是内联框</span>










