CSS学习之五 定位布局

<div class=”father padding”>
<div class=”child position_r margin”>相对定位的盒子。相对于父元素顶部偏移30px，左边偏移30px</div>
定位盒子的父元素
</div>

<div class=”father”>
<span class=”father padding”><span class=”child position_r margin”>相对定位的内联框,相对于父元素左边偏移30px，顶部偏移20px。</span>包含块是内联框</span>
<p>
<em>之所以只向顶部偏移20px而不是30px，是因为内联元素上下边距合并所致。在IE6、IE7下相对定位的子元素span距离顶部10px（父元素溢出部分被隐藏）。</em></p>
</div>

样式：

.padding { padding: 10px 0 0 10px; }
.margin { margin: 10px 0 0 10px; }

效果截图：

结论：对于相对定位的元素，其margin值仍然起作用，并且向父元素的内边距靠齐。
下面展示非根元素做包含块的另一种情况，HTML结构如下：

<div class=”wrapper position_r padding”>
<div class=”child position_a”>绝对定位的盒子。相对于父元素顶部偏移10px，左边偏移10px，说明父元素padding无效。</div>

块级父元素
</div>

<div class=”wrapper position_r”>
<div class=”child position_a margin”>绝对定位的盒子。相对于父元素顶部偏移20px，左边偏移20px，说明绝对定位元素可以有外边距。</div>

块级父元素
</div>

<div class=”wrapper”>
<span class=”father position_r padding”>行内父元素<span class=”child position_a”>绝对定位的行内元素。</span></span>
<p>

<em>相对于父元素顶部偏移10px，左边偏移10px（父元素有左、上内边距）。IE6下宽度不受行内父元素限制。</em></p>
</div>

<div class=”wrapper”>
<span class=”father position_r”>行内父元素<span class=”child position_a margin”>绝对定位的行内元素。</span></span>
<p>

<em>相对于父元素顶部偏移20px，左边偏移20px（子元素有左、上外边距）。IE6下宽度不受行内父元素限制。</em></p>
</div>

样式同上，效果截图如下：

块级元素的情况