【CSS】之定位

1. position:static

元素的 position 屬性默認值為:static,即該元素出現在文檔的常規位置,不會重新定位。

通常此屬性值可以不設置,除非是要覆蓋之前的定義。

#div-1 {
 position:static;
}

2. position:relative

設置了 position:relative,便可以結合top 、 bottom、 left 、 right 的屬性來偏移其文檔的常規位置。

例如將 div-1 向下移動 20 像素、向左移動 40 像素:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

注意 div-1 未被移動之前的地方,現在多了一點空隙,緊接著 div-1 的元素(div-after)卻沒有被移動,事實上即便 div-1 被移動了,它仍佔據原始位置

貌似 position:relative 用處不大(我到覺得這點很有用),但在後面的內容中顯得尤為重要。

3. position:absolute

設置了 position:absolute,即絕對定位,便可以將元素放在文檔中任何想放的位置。

例如將 div-1a 放置到右上角:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

注意!由於 div-1a 被移走, 頁面中的其他元素位置也變了: div-1b, div-1c, div-after 都因此上移了。

div-1a 被放置在頁面的右上角。 能直接地定位元素很方便,但作用也不大。

這裡真正要做的是將 div-1a 相對於 div-1 定位,這就又要講到 relative 屬性了。

  • IE瀏覽器Bug:設置了相對寬度(如 "width:50%"),該寬度將基於父元素而非自身。

4. position:relative + position:absolute

設置div-1的位置為 relative , div-1中元素的定位都將相對於div-1。現將div-1a的position設為:absolute,可以實現將其置於div-1的右上角:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. 兩列絕對定位

接下來使用relative 和absolute 實現兩列的絕對定位:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

使用絕對定位(absolute positioning)的優點就是不需考慮元素在html中的位置,可以對元素任意放置,此處故意將div-1b放到div-1a之前;

注意,還有個元素被絕對定位的元素遮住了,怎麼辦?

6. two column absolute height

一種辦法是設置固定高度。

但不是萬全之策,因為元素的高度、字體的大小並不總是確定的。

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float(浮動)

針對高度不定的情況,絕對定位不好用,於是想到另一方案。

可以盡量使用向左或向右浮動來實現文字環繞,特別是環繞圖片,此處用於更複雜的佈局工作(也只有用這種方法)。

#div-1a {
 float:left;
 width:200px;
}

8. 多列浮動

將兩列都像左浮動,可以實現兩列並列。

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. 多列浮動後清除浮動

將元素浮動後,再使用"clear" 清除浮動,後面內容拉向下。

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Disclaimer & Resources

These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many).

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。