css position用法详解[转]
由于平时不太用到，所以过去写css的时候对于position属性的absolute、relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除了理解的因素外，各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档，总算是对盒模型的浮动、定位有了比较深刻的理解。
我们在实践中很有可能遇到这样的问题：
1、做一个横向导航，然后鼠标经过之后出现下拉菜单，那么这个下拉菜单的位置控制就是一个关键；
2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示，这时既不想让气泡提示破坏正常的文档布局，又不想气泡提示的定位在不同的浏览器中到处乱飘。
3、当我们在一句正常的文本中插入一个小图标的话，一般会使用<img />标签，而这时它的垂直居中问题又是让人困惑，无论你使用html属性absmiddle、或是使用css属性vertical-align、抑或是使用父对象的heigh + line-height，在不同的浏览器中总会看起来不同。
嗯，上面几个问题你是否也遇到过呢？如果你至今还没有一个很好的解决办法，不妨继续阅读此文，或许能对你有所帮助：）
我们先看一下position属性的几个取值定义：
position: static、absolute、relative
static : 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
relative: 相对定位。这个属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top, left, right, bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素.
absolute: 绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top, left, right, bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了。如果把示例中的B区域设定为absolute而不指定 4个位置属性，通过设定margin来改变它的相对位置，用这个方法可以解决前面提到的问题2。
提示: 属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是
直接有效的；
而属性值为relative对象的z-index属性在设置时要小心，把当前对象的z-index设置为-1是不行的，在firefox中它会无法显示（注意，不是说浏览器有误，而是指如果父对象是根元素body，那么z-index是无效的，任何z-index设置都不会显示在根元素之后，除了IE的解析bug，感谢#19提示），必须设置为0以上，我们如果想让别的对象挡住它，只有将其他对象也设置position为relative，并将z- index属性取一个比它大的值即可。
上面的表述不知道也许不是很清晰，具体的理解还是要自己亲自动手操作一下。
///////////////////////////////---------------插几句--------------------------/////////////////////////////
注：大家可以用下面的例子试下，这是我在看这篇文章时写的测试代码，大家可以把以下的这几个例子按顺序运行一下，相信之后就会明白作者的意思了
1.默认的显示，即static定位
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body>
<div ></div></div>
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 </body> </html>
2.相对定位，如作者所言，是相对于它上一个元素，其实就是相对其在文档流中的默认位置的定位，设置相对后，跟在该元素后的元素的位置不发生任何变化，依然我行我素.
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body>
<div ></div>
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <
br />换行 <br />换行 <br />换行 <br />换行 <br />换行 </body> </html>
这个例子也许看得更直接一点，你会看到后声明的绿出现在了先声明的红div的前面
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body> <div ></div>
<div ></div>
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <
br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 </body> </html>
position标签属性3.蓝的div设置为绝对定位，但是由于还没有指定top, left, right, bottom任一属性，所以此时它的位置仍是有继承性的，还是在显示在其原来文档流中的位置
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body> <div ></div>
<div ></div>
<div ></div>
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 </body> </html>
4.指定蓝div的位置，再看效果:
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style>
</head>
<body> <div ></div>
<div ></div>
<div ></div>
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行
<br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 <br />换行 </body> </html>
/////////////////////////------------------------------------------//////////////////////////////
这样看来，前面的问题就有解了，问题3我们可以根据设计的要求将其设置为相对或绝对定位；
问题1的解决方法也有很多，个人推荐使用有语义的dl, dt, dd来实现(什么东西?)，而且这个方法在不同浏览器中的表现基本相同（已在ie, firefox, opera, safari中测试），仅在top的属性上有几像素的差异(这段没看明白，不理解)
下面这一篇讲得也很明白，但是有的地方没有上面这一篇说的清楚，不过相信大家把这两篇都看过之后应该会对position理解的比较透彻了:
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。
position的四个属性值：
relative
absolute
fixed
static
下面分别讲述这四个属性。
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。
随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把
sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。
3. fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
4. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论