CSS学习之五 定位布局

前端  /  管理员 发布于 7年前   179

一、定位属性的基本情况

使用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; }

效果截图：
下面说明非根元素做包含块的一种情况：
如果定位的元素其position值是relative或static，包含块则由最近的块级框、表单表格或者行内块级祖先元素的内容边界组成。
接着展示相对定位的元素与其包含块的边距问题，结构如下：

复制代码代码如下:
<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>

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

块级元素的情况

行内元素的情况

结论：一个非根元素，如果是绝对定位，则它的包含块设置为离它最近的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; }

所得效果截图：

结论：

1. 相对定位时，作为内联元素处理。
2. 绝对定位时，作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>
</div>
 

效果截图：

相对定位元素的宽高

结论：

1. 相对定位元素不能用top,left,right,bottom关键字指定宽高（此时right和bottom值被忽略），必须用width和height指定。
2. 相对定位的内联元素不可以设置宽高。

2、绝对定位的情况：

HTML结构：

复制代码代码如下:
<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; ">绝对定位元素，可以用top,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以。
top: 10px; right: 10px; bottom: 10px; left: 10px; </div>
</div>
<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; ">绝对定位元素，可以用top,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以
top: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; </div>
</div>
<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; ">绝对定位元素，可以用top,left,right,bottom关键字结合width指定宽高。IE6浏览器下不可以。
top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; </div>
</div>
<div class="father">
<span style=" border: 1px solid #999; " class="position_r">行内父元素<span class="child position_a" style=" top: 10px; left: 10px; width: 100%;">绝对定位的行内元素。这里可以设置其宽高。IE6下宽度不受行内父元素限制。</span></span>
</div>

效果截图：

绝对定位元素的宽高1

绝对定位元素的宽高2

结论：

1. 非IE6下，绝对定位元素可以用top,left,right,bottom关键字指定宽高（注意对比，需结合width指定才行），也可以用width和height指定。
2. 绝对定位的内联元素也可以设置宽高。
3. 事实上，绝对定位的元素宽度有以下规则：left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块width。
4. IE6下绝对定位的行内元素宽度不受父元素限制。

五、定位元素在z轴上的放置
以下是CSS2.1关于z-index属性的一些说明：

auto:默认值。遵从其父对象的定位
number:无单位的整数值。可为负数

检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。

假设有如下HTML结构：

复制代码代码如下:
<div class="father position_r">
<div class="child position_a" id="box_red">(z-index: 30;)
<div class="subChild" id="subChild_tl">(z-index: auto;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_bl">(z-index: 29;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_br">(z-index: 9;)
我是红色大盒子的子盒子</div>
<div class="subChild" id="subChild_extra1">
(z-index: -1000;)
我是红色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_green">(z-index: 10;)
<div class="subChild" id="subChild_extra2">
(z-index: 2000;)
我是绿色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_blue">(z-index: 20;)
<div class="subChild" id="subChild_extra3">
(z-index: 1000;)
我是蓝色大盒子的子盒子</div>
</div>
</div>

添加如下样式：

复制代码代码如下:
.position_r { position: relative; }
.position_a { position: absolute; }
#box_red { background: red; z-index: 30; top: 100px; left: 100px; }
#box_green { background: green; z-index: 10; top: 200px; left: 200px; }
#box_blue { background: blue; z-index: 20; top: 300px; left: 300px; }
.subChild { width: 100px; height: 100px; text-align: left; position: absolute; }
#subChild_tl { background: green; top: -50px; left: -50px; z-index: auto; }
#subChild_bl { background: blue; bottom: 0px; left: 0px; z-index: 29; }
#subChild_br { background: red; bottom: -50px; right: -50px; z-index: 9; }
#subChild_extra1 { background: maroon; width: 150px; height: 150px; top: 20px; right: 20px; z-index: -1000; }
#subChild_extra2 { background: orange; width: 150px; top: 80px; left: -70px; z-index: 2000; }
#subChild_extra3 { background: gold; top: 30px; left: -25px; z-index: 1000; }

效果截图：

有如下结论：

1. 默认(z-index: auto;)情况下，所有绝对定位的元素根据其在文档中出现的顺序显示。
2. 为z-index赋值之后，绝对定位的叠加依赖于父元素的z-index值，值越大越显示在上层。
3. 隶属于同一父元素的同级兄弟元素，根据其z-index值确定其在z轴上的顺序，值越大越显示在上层。
4. 隶属不同父元素的同级元素，其在z轴上的顺序将由它们的父元素的z-index值确定，而与它们本身的z-index值无关。
5. z-index: auto;等价于z-index: 0;

可以这么说：对于绝对定位的元素，父元素在z轴上的顺序将决定他所有后代元素在z轴上的顺序，z-index值大的父（祖先）元素将使得它的子孙元素优先显示。

或者您这么理解：确定绝对定位元素叠加顺序时，纵向比较父元素的z-index值大小，横向比较兄弟元素z-index大小，值越大越显示在上层。

说明：以上所有截图均来自FF 3.6，无特别说明的地方，均已兼容其他（主流）浏览器。笔者水平有限，有错误的地方请指正！

注：内容参考《CSS权威指南》（第三版）