CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的五个值：

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

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

例如

div.static
{
position: static;
border: 3px solid #73AD21;
}

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

例如

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

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

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

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

relative 定位

相对定位元素的定位是相对其正常位置。

例如

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}


移动相对定位元素，但它原本所占的空间不会改变。

例如

h2.pos_top
{
position:relative;
top:-50px;
}

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

例如

h2
{
position:absolute;
left:100px;
top:150px;
}


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

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

 

posted @ 2021-12-18 20:19  桀116  阅读(42)  评论(0)    收藏  举报