CSS学习之五 定位布局

当前位置 : 首页 > 网页制作 > CSS > CSS学习之五 定位布局

CSS学习之五 定位布局

来源: 作者: 时间:2015-11-23 09:27
定位的原理很简单,利用定位,可以准确的定义元素框对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位的原理很简单,利用定位,可以准确的定义元素框对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一、定位属性的基本情况

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

效果截图:
非根元素的包含块1下面说明非根元素做包含块的一种情况:
如果定位的元素其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

绝对定位元素的宽高1

绝对定位元素的宽高2

绝对定位元素的宽高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; }

效果截图:

z-index规则

有如下结论

  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权威指南》(第三版)

Tag:
上一篇:CSS学习之四 浮动
下一篇:[CSS教程]

相关文章

网友评论

<