CSS学习之五 定位布局
发布时间：2010-08-26 23:57:33 作者：佚名 
我要评论
我要评论定位的原理很简单，利用定位，可以准确的定义元素框对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一、定位属性的基本情况
使用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; }
所得效果截图：
结论：
- 相对定位时，作为内联元素处理。
- 绝对定位时，作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>
效果截图：
相对定位元素的宽高
结论：
- 相对定位元素不能用top,left,right,bottom关键字指定宽高（此时right和bottom值被忽略），必须用width和height指定。
- 相对定位的内联元素不可以设置宽高。
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
结论：
- 非IE6下，绝对定位元素可以用top,left,right,bottom关键字指定宽高（注意对比，需结合width指定才行），也可以用width和height指定。
- 绝对定位的内联元素也可以设置宽高。
- 事实上，绝对定位的元素宽度有以下规则：left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块width。
- 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; }
效果截图：
有如下结论：
- 默认(z-index: auto;)情况下，所有绝对定位的元素根据其在文档中出现的顺序显示。
- 为z-index赋值之后，绝对定位的叠加依赖于父元素的z-index值，值越大越显示在上层。
- 隶属于同一父元素的同级兄弟元素，根据其z-index值确定其在z轴上的顺序，值越大越显示在上层。
- 隶属不同父元素的同级元素，其在z轴上的顺序将由它们的父元素的z-index值确定，而与它们本身的z-index值无关。
- z-index: auto;等价于z-index: 0;
可以这么说：对于绝对定位的元素，父元素在z轴上的顺序将决定他所有后代元素在z轴上的顺序，z-index值大的父（祖先）元素将使得它的子孙元素优先显示。
或者您这么理解：确定绝对定位元素叠加顺序时，纵向比较父元素的z-index值大小，横向比较兄弟元素z-index大小，值越大越显示在上层。
说明：以上所有截图均来自FF 3.6，无特别说明的地方，均已兼容其他（主流）浏览器。笔者水平有限，有错误的地方请指正！
注：内容参考《CSS权威指南》（第三版）
相关文章
如何使用CSS的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer（IE）中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width（宽度）、border-style（样式）和border-color（颜色）等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论