驼驼的div+css之路---十天里的第二天（css定位）

时间：2006-01-17 来源：瘦死的骆驼

第二天开始. 昨天学习了css的基本用法.包括css的引用和一些常用css属性。掌握了css的基本用法，只是完成了css+div排版的第一步。说到排版，最重要的莫过于定位。我们用table来排版的时候是直接在网页上画出一个个格子，把内容填充到相应的格子里去。用css也是这个原理，不过css不能直接划格子，它有它自己的一套定位方法。今天的目标就是掌握css的定位。

首先，介绍两个定义：相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。下面是定位需要用到的几个属性：

因为定位不是一般的重要，所以这里详细介绍一下各个参数的作用：

position: static | absolute |relative
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
//我们用绝对定位的时候一般都用这个属性。
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

left： auto|lenth
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。
例：div { position: absolute; left： 1in; }
top和left的用法是一样的，也要注意的是必须定义position属性值为absolute或者relative此取值方可生效。

width：auto|lenth
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值 | 百分数。
height与width语法完全相同。而它不需要定义position必须为absolute

clip : auto | rect ( number number number number )
auto : 　对象无剪切
rect ( number number number number ) : 　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切

overflow : visible | auto | hidden | scroll
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
//这个属性的结果就像当与没有div，内容有多少就显示多少。
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

z-index： auto | number
auto : 　遵从其父对象的定位
number : 　无单位的整数值。可为负数
//应该是用来产生一些立体效果滴

visibility： inherit | visible | collapse | hidden
inherit : 　继承上一个父对象的可见性
visible : 　对象可视 hidden : 　对象隐藏
collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

以上属性中的position,width,height,left,top,z-index是用来给div定位的，其中的clip，overflow，visibility则是用来控制对内容的显示的，这些属性可以看作一个层的基本属性。掌握了层的基本属性，我们就可以来看一个用层来定位并控制显示的例子:

<html>
　　　<head>
　　　<title>dingwei css</title>
　　　<style type=“text/css”>
　　　
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <p style=“font-family:行书体；font-size:15pt；color:#cc33cc”>
　　　请选择一幅图片： </p>//*设置字体大小、名称、颜色*//
　　　 <div id=“container1”>
　　　 <dd><img src=“ss01065.jpg” width=“185”height=“280”>
　　　//*导入一张图片，标识符为container1*//
　　　 <p style=“font-family:行书体；color:#cc9933；font-size:12pt”>
　　　　名称：大漠</p>//*设置字体名称、颜色、大小*//
　　　 </dd>
　　　 </div>
　　　 <div id=“container2”>
　　　 <dd><img src=“ss01095.jpg” width=“185”height=“280”>
　　　//*导入另一种图片，标识符为container2*//
　　　 <p style=“font-family:行书体；color:#3366cc；font-size:12pt”>
　　　　　名称：大海</p>
　　　 </dd>
　　　 </div>
　　　 <form name=“myform”>//*定义两个按钮*//
　　　 <p><input type=“button” value=“大漠” 　　　　　
　　　　onclick=“container1.style.visibility=‘visible’；
　　　　container2.style.visibility=‘hidden’”>
　　　 //*定义鼠标点击事件图片1为可见，图片2为不可见*//
　　　 <input type=“button” value=“大海”；
　　　　container1.style.visibility=‘hidden’；
　　　　onclick=“container2.style.visibility=‘visible’；
　　　　container1.style.visibility=‘hidden’”></p>
　　　　//*定义鼠标点击事件图片1为不可见，图片2为可见*//
　　　　</form>
　　　　</body>
　　</html>
button上用了一点js的技巧来控制css中的visibility值.

演示

上面这个例子讲的只是平面布局,驼驼以前的css知识也就到此为止,然而上面有个z-index的参数,是用来立体定位的,所以,div也可以是立体的,下面就来一个简单的立体例子:
<html>
　　　 <head>
　　　 <title>zindex</title>
　　　 <style type=“text/css”>
　　　 <!-- 　　　　　　　　　　　　　　　　　　
　　　　.pile｛position:absolute；left:2in；top:2in；
　　　　width:3in；
　　　　</style>
　　　　</head>
　　　　<body>
　　　　<img src=“ss01010.jpg” class=“pile” id=“image”
　　　　 style=“z-index:1”>
　　　　 //*导入一张图片，使它为pile类，z-index属性定义为１，位置处于最下方
　　　　　　*//
　　　　<div class=“pile” id=“text1”
　　　　style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
　　　　</div>//*定义一段文字的颜色和z-index属性为2，处于中间位置*//
　　　　<img src=“075.gif” class=“pile1” id=“image”
　　　　style=“z-index:3”>
　　　　 //*导入第二张图片，使它为“pile1”类，z-index属性为3，位置处于最上
　　　　　　方*//
　　　　</body>
　　</html>

演示在这里

这个例子也简单明了,没什么好啰嗦的.

so,说到这里，我已经可以用position,width,height,left,top,z-index来对div进行定位了，定位的基础知识也就算到此为止了。