position定位属性(二)

Position static

元素都有position属性，其默认值是"static"，当元素设置了position属性，将会覆盖元素的默认值"static"。

Position relative

relative是position的另一个属性值，和static属性值很相似，主要区别是relative可以给元素设置位移属性(即top, right, bottom, left)，通过这些位移属性设置可以给元素进行精确的定位。

Position absolute

绝对定位元素也具有盒子位移属性，然而，绝对定位元素会脱离文档流。

绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。

绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。

使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。

例如，一个绝对定位的元素设置了“top”值为“50px”和一个“right”值为“100px”,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动100px。

然而，使用了绝对定位的元素并没有进行任何盒子位移属性设置，那么绝对定位元素的顶部和左部会和设置了相对定位的父元素的顶边和左边重合。

如果设置了一个盒子位移属性，比如说“top”，那么绝对定位元素垂直方向会进行移动，而水平位置默认还是左边对齐。

Position fixed

固定定位和绝对定位很类似，但是他定位是相对于浏览器窗口，并且不会随滚动条进行滚动。

也就是说，不管用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方。

“position”属性值中，仅有“fixed”属性值不能在IE6浏览器下运行，如果你想在IE6正常使用固定定位，那么你就需要为他写一些Hacks。

固定定位元素的盒子位移属性的使用和绝对定位的一样。

保持前面盒子移位，可以看到盒子固定定位是相对于浏览器窗口而不是设置了相对定位的父元素。

固定页头和页脚

固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是固定在页现与用户交流。

注意如何设置“left”和“right”两个盒子位移，这使得“页脚”跨越了页面的整个宽度，而不需使用margin、border和padding来破坏盒模形就做了收缩自如。

盒子的位移属性？

盒子的位移属性有四个"top, right, bottom, left",用于指定元素的定位位置和方向。

这些属性只有在 "position" 属性设置了  "relative、absolute和fixed"属性值时才生效。

对于相对定位元素：

这些属性的设置让元素从默认位置移动。

例如，top设置一个值20px在一个相对定位的元素上，这个元素会在原来位置向下移动20px。反之，top设置一个-20px，则在原来位置向上移动20px。

对于绝对定位和固定定位：

这些属性指定了元素与父元素边缘之间的距离。

例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，如果设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html © w3cplus.com