CSS中的Position

Position定位有四种方法：static，fixed，relative和absolute

  • Static

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

  • Fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

  • Relative

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
</body>

</html>

  • Absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>,因此窗口滚动时它也会跟着滚动。

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

posted on 2015-12-02 09:35  wjw413c  阅读(147)  评论(0)  编辑  收藏  举报

导航