CSS学习之五定位布局

2024-07-11 08:26:28

字体：大中小

来源：转载

供稿：网友

一、定位属性的基本情况

使用position属性对元素进行定位：

position属性

值：static | absolute | fixed | relative
初始值：static
运用范围：所有元素
继承值：无
计算值：根据指定确定

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来它在正常流中生成何种类型的框。

fixed：元素框表现类似于absolute，不过其包含块是视窗本身。

二、解释定位元素的包含块

假设有如下所示HTML结构：

复制代码

代码如下:
<div class="father position_a">距离窗口上端100px，距离窗口左端0px</div>

给它添加如下样式：

复制代码

代码如下:
* { margin: 0; padding: 0; }
body { font: 12px/1.5 Tahoma, Verdana, "宋体", sans-serif; padding: 50px; }
div { margin-top: 5px; }
.conclusion { margin: 300px 50px ; }
h1, strong { color: red; }
strong, em { font-style: normal; font-weight: normal; }
/* 以上是所有Demo公共样式，下面的Demo中省略 */
.father { background-color: #999; width: 200px; height: 200px; }
.position_a { position: absolute; top: 100px; left: 0px; }

效果比较简单，就是一个紧贴着窗口左边且距离窗口上端100px的盒子，请单击查看Demo
有如下结论：
在HTML中，根元素的包含块就是html元素。
说明：为了直观地查看，实例采用绝对定位方式
下面说明包含块不是根元素的情况：
HTML结构：

复制代码

代码如下:
<div class="father">
<div class="child position_r">相对定位的盒子。相对于块级父元素顶部偏移10px，左边偏移10px</div>
包含块是块级框
</div>

<div class="father">
<span class="father"><span class="child position_r">相对定位的内联框。相对于内联父元素顶部偏移10px，左边偏移10px</span>包含块是内联框</span>
</div>

样式：

复制代码

代码如下:
.position_r { position: relative; top: 10px; left: 10px; }

效果截图：