div+定位与浮动

来源：互联网发布：ws小世界网络编辑：程序博客网时间：2024/05/16 10:27

不错的一篇总结性文章！

一、概述
二、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 对齐的话，就是一个向上的负座标。
下图列出了偏移产生前后的位置关系：

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

偏移后：

结合以上图示和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样式表如下：

页面一：

页面二：

页面三：

通过以上的范例和理论说明，我们应该从原理上理解了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>
<div class="style" style="position: static;">层一</div>
<div class="style">层二</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">
.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>