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