以下为引用的内容: <body> <div id="box"> <div id="nav"> <p>每个显示元素都可以用定位的方法来描述,而其位置由此元素的<strong>包含块</strong>来决定的。</p>
</div> </div> </body>
|
此时,如果你要对nav绝对定位,则需设置css:
以下为引用的内容:
body { margin:0; padding:0; text-align:center; } #box{ background:#ff0; position:relative; /* 使box层成为其子孙元素的包含块 */ width:500px; height:200px; margin:0 auto; } #nav { background:#ccc; position:absolute; /* nav层将在box层的边框范围内绝对定位 */ top:20px; left:40px; width:200px; }
|
其显示效果如图3所示。

因此,掌握了包含块的概念,定位就变得不那么困难了。