一、定位属性的基本情况
使用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 rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" 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学习之五 定位布局就介绍到这了。岁前的周折经历,将是人生的一大笔财富。更多相关CSS学习之五 定位布局内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!