div+css层属性定位原理

div+css层属性定位原理

“为何我的层不会老老实实地显示在它该在的位置上？”，这个问题算是在学习“用DIV+CSS制作网页”的过程中问得最多的问题之一了，这次我们将学习如何驾驭它。
作者：COOANT

• 一、概述
• 二、position属性
• 三、top,right,bottom,left属性
• 四、float属性
• 五、z-index属性

一、概述

    本文以标签“<div></div>”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。
    本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。

    我们在平时的网页制作中，已经或多或少的接触过CSS样式表中的“position(位置)”属性，其实这基本算是定位根源所在了。当然了，这并不是全部，如果再加上“float”、“z-index”等属性，我们的层定位将会更加完美。下面我们将一一讲解：

 

二、position属性

    position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默认值。

·static

    该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。
例如：

层一

层二

源代码如下：

<div class="style">层一</div>
<div class="style">层二</div>
.style {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    margin-bottom:5px;
}

·relative

    相对定位，相对于什么位置呢？官方手册中是这样说的：“Relative position that is offset from the initial normal position in the flow.”可以简单的如此解释：偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。下图列出了偏移产生前后的位置关系：

完整的代码如下：
偏移前：

<style type="text/css">
.style1 {
    position:relative;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>
 

偏移后：

<style type="text/css">
.style1 {
    position:relative;
    left:30px;
    top:30px;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>
 

结合以上图示和CSS样式表可以得出以下两个结论：

• 设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者position值取static时一样。
• 当一个层设置了position:relative，而且使得层位置产生相对偏移时，并不影响文本流中接下来的其他层的位置。

    另外我们还可以做如下尝试，当层二对应的css样式表“style2”不设置position:relative时，会发现层一偏移后重叠时，层一覆盖了层二。而不是我们图示上层二覆盖了层一。
    原因时这样的，当设置了position:relative，层的层叠级别高于默认的文本流级别。当然了，如果都设置了position:relative，同等级别下将会按照文本流的顺序层叠显示。

·absolute

    绝对定位，回忆一下，当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的 父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生人和影响（当它不存在！）。
    注意：如果父容器没有设置position属性或position值为static时，将以body的坐标原点为参考。

    下面我们以三个图示来分别说明。

上面三个页面效果的css样式表如下：

页面一：

<style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>
 

页面二：

<style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:0;
    left:0;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>
 

页面三：

<style type="text/css">
.style1 {
    position:relative;
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:10px;
    left:10px;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>
 

<!--范例源代码结束-->

    通过以上的范例和理论说明，我们应该从原理上理解了absolute定位。这里补上官方对于absolute的解释：
    “Taken out of the flow and offset according to the containing block. ”

    截至这里，希望各位可以稍作休息，尝试修改上面范例中的css属性，做到举一反三，充分理解。

·fixed

    固定定位，它的效果类似常见的浮动广告，无论如何拖动浏览器的滚动条，层始终悬浮在浏览器的某个位置。由于该属性只能被Firefox很好的支持，虽然可以在通过其它设置在IE6.0中得到同样的效果，但由于本文篇幅原因，不继续对本属性继续作解释。下面的经典案例中将会有相关解释。

·inherit

    继承，和其它属性的继承一样。在这里为继承父元素中的position值。

三、top,right,bottom,left属性

    这四个属性中的top和left属性之前有使用过（right和bottom用法也一样），大致功能我们基本已经清楚了，这里再简单介绍一下。

    这四个属性在设置了position属性，并且值不为static时生效。当position取值relative时，偏离文本流初始位置；当position取值absolute时，以父容器对应的初始点为原点偏移，如果父容器没有设置positon或者position取值static时，以body对应的坐标点为参考点偏移。     top,right,bottom,left属性的取值除了具体的数值外，还可以是百分比、继承、或者auto（默认值）。

四、float属性

    取值包括inherit，left，right以及默认值none，该属性用于控制文本流的显示方向。需要注意的是如果设置了该属性并取值为left或right后，会影响到该流后面的其它盒子模型。可以通过设置“clear:both;”清除该属性设置。 例如：

层一

层二

层三

源代码如下：

<div class="style1">层一</div>
<div class="style1">层二</div>
<div class="style2">层三</div>
.style1 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    clear:both;
    margin-bottom:5px;
}

    需要注意的是由于float控制的是文本流方向，当为层设置了“position:absolute;”后，float将不再有效，应为此时层已经脱离该文本流。

五、z-index属性

    该属性在设置了position并取值为“absolute”或“relative”时有效，用于控制层在Z- 轴上的排列顺序，值为整数（由于不同浏览器的兼容性的区别，最好是正整数），取值越大层越在最上面。