position定位属性.docVIP

我们可以通过CSS中的float属性进行页面布局，利用它可以做出很多效果。如果想让布局出现在页面中固定的位置，需要用什么属性进行设置呢？ CSS定位属性position的应用 来源：黄超 [ HYPERLINK /od/divcss/a/css-position_p1.htm \t _blank 点击放大] 本篇文章我们学习定位功能的常用方法，它可以打破页面布局的局限性，让你做出更富想象力的页面。 定位属性position 定位属性是position，它有四个属性，分别为： static：默认值。 relative：相对定位。 absolute：绝对定位。 fixed：固定定位。 下面我们再对它们一一进行详细介绍。 static，默认值 说到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就是让元素继续按照文档流显示，不作出任何改变。 relative，相对定位 位置属性被设置为relative之后，被设置的元素会被设置到相对于原来正常位置的地方。比如，设置relative后，再设置left:20px，那么这个元素会被移动到距原来正常位置20像素的水平位置。 示例： CSS部分： .left20 { position:relative; left:20px; } Html部分： p左侧顶格内容/p p class=left20 相对坐标，离左侧正常位置20像素。/p absolute，绝对定位 位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。这个定义听起来比较空洞，还是举例说明更加直接。 CSS部分： #pos_left { position:absolute; left:20px; top:50px; background:#F00; width:150px; height:150px; }  #pos_right { position:absolute; right:20px; top:50px; background:#000; width:50px; height:50px; color:#FFF; overflow:hidden; } Html部分： div id=pos_left绝对定位的红色色块，距左侧20像素，距顶部50像素。/div div id=pos_right绝对定位的黑色色块，距右侧20像素，距顶部50像素。/div 上面例子中的CSS的父层是body，所以它们的定位是依据body来定位的，效果如图一所示。如果将Html部分修改一下，变成： div id=pos_left div id=pos_right父层是pos_left，这里绝对定位的黑色色块，距pos_left内部右侧20像素，距pos_left顶部50像素。/div /div 效果如图二。为什么会变成这样？答案就在前面介绍的定义中，“被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）”，修改过的Html书写方法将pos_right写在了pos_left里面，使pos_left成为了pos_right的父层，所以这个绝对坐标就被定义在了包含pos_right的pos_left里面。不知道这样说是不是足够清楚。 固定位置，fixed 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。但是目前它在IE6中不被支持，只有IE7和Firefox浏览器可以识别，如果非要让它在IE6中正常显示，需要进行较复杂的定义，所以我们在这里就不继续探讨fixed的使用方法了，了解它的意思即可。 欲了解更多请进 HYPERLINK 或