div 定位 样式设计

http://www.webw3c.org/divcss-tech/divcss-cengshuxingdingweiyuanli/

不错的一篇总结性文章！

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

一、概述

本文以标签“<div></div>”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。

本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

我们在平时的网页制作中，已经或多或少的接触过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 theinitial normal position in theflow.”可以简单的如此解释：偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。

例如 div[position="relative"] 设置了top 、left，那么div的位置会根据“原来文档流的位置发生偏移，且不是相对整个窗口的top,left”,其后面的元素位置不变。

left,top 是相对自身文档流位置发生偏移，而不是父div的left,top。 例如： 父div 有两个子divA,divB ,divB文档流位置就在divA位置后面，divA的top设置成0px就可以与父窗口位置对齐,divB的top设置成0px则不行，因为divB相对自身文档流位置要往上面的父div 对齐的话，就是一个向上的负座标。

下图列出了偏移产生前后的位置关系：



完整的代码如下：

偏移前：
<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:absolute并产生偏移（设置了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（默认值）。

auto的设置： 当div[position="absolute"]时，width:auto;根据内容自动设置宽度，当div[position="relative"]时,auto为父div宽度，如果没有父div，则为窗口宽度

四、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将不再有效，因为absolute的层已经脱离该文本流。

auto的设置： 当div[position="absolute"]时，width:auto;根据内容自动设置宽度，当div[position="relative"]时,auto为父div宽度，如果没有父div，则为窗口宽度

float 控制文本流的显示方向，当一个 父div中的子div 都是float时，父div高度，和宽度是不会根据内容而适应的。

div为float时，它的下一个非float的div 的margin相对于float的div是无效的，只有都是float才有效；因为影响下一个元素的位置，所以div为float的margin可以影响下一个div的位置，不管他是否为float

float影响下一个文档流的显示方向，从上至下，或从左至右。从左至右这种情况是指：如果float的div设置的高度很高，那么下一个元素的位置受它高度的影响。

例：

<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>

ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss

如果不想受float 的影响，添加<dir style="clear: both;"></dir>就可以了，接下来的元素就是换行显示。

五、z-index属性

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

Code:

relative.html

[html] view
plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

html{

font-size: 12px;

}

body{

//color: #666666;

}

div{

border: 1px solid #666666;

}

.style {

border: 1px solid #999900;

background-color: #CCFF99;

width: 80px;

height: 80px;

margin-bottom: 5px;

}

</style>

</head>

<body>

<!-- position默认为 static -->

<div class="style" style="position: static;">层一</div>

<div class="style">层二</div>

<!-- 相对位 relative-->

偏移前：

<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">

.style3 {

position: relative;

left: 30px;

top: 30px;

height: 80px;

width: 80px;

margin-bottom: 10px;

border: 1px solid #000;

background-color: #acd373;

}

.style4 {

position: relative;

height: 80px;

width: 80px;

border: 1px solid #000;

background-color: #f26c4f;

}

.parent_ {

position: relative;

border: 1px solid #000;

background-color: #f26c4f;

left: 5px;

}

</style>

<div class="parent_">父div中的文字,影响到子div相对父窗口定位,<B>所以div中的文字一般都放到子div来显示?</B>

<div class="style3">偏移后:层一(相对父窗体偏移)</div>

<div class="style4">偏移后:层二(我不管我跟父容器混的～～)</div>

<div style="float: right;" >floatAA（飘过～～）</div>

<div>我被float影响了！</div>

<div style="float: right;" >floatBB（继续飘过～～）</div>

<div style="clear: both;">我才不管float！</div>

<div>完全无视，float只能影响下一个元素，我受我上一个div的影响</div>

<div style="position: relative; top: -172px ;left: 0px">看到没有？文字放到div里面了</div>

</div>

<div style="background-color:blue;">我是下个一文件档流</div>

</body>

</html>

code2:

absolute.html

[html] view
plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<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>

</body>

</html>