簡析CSS中position屬性值的區別

2021-08-09 06:08:39 字數 910 閱讀 7311

position規定元素的定位型別,可以設定的值有:static,relative,absolute,fixed,inherit。

我們寫5個方塊,來顯示各個值的區別。

**:

type="text/css">

* .test1

.test2

.test3

.test4

.test5

style>

class='test1'>test1

class='test2'>test2

class='test3'>test3div>

class='test4'>test4div>

class='test5'>test5div>

div>

div>

body>

效果如圖:

我們可以由此知道:

class='test1'>test1

class='test2'>test2

class='test3'>test3

class='test4'>test4div>

div>

class='test5'>test5div>

div>

div>

如圖:
這時,test4是相對test3定位的,不像之前作為相鄰元素相互依靠了。即如果它的父級元素和爺爺級元素都是非position:static屬性,則它會選擇距離最近的父元素。

CSS中的 important簡析

important是css1就定義的語法,作用是提高指定樣式規則的應用優先權。語法格式,即寫在定義的最後面,例如 box 假如我要對乙個div在ie7中寬為200px,在ie6中寬180px,則 div div important 表示某條屬性 宣告 具體最高的優化級,所以雖然看起來下面的把上方的屬...

定位上下文(補充css的position屬性)

把元素的position屬性設定為relative absolute或fixed後,繼而可以使用trbl屬性,相對於另乙個元素移動該元素的位置。這裡的 另乙個元素 就是該元素的定位上下文。絕對定位元素的預設上下文是body。然而絕對定位元素的任何祖先元素都可以成為它的定位上下文,只要把相應的祖先元素...

關於css中的position

對於position的幾個屬性 static 無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z index屬性定義。此時物件不具有邊距,但仍有補白和邊框 relative 物件不可層疊,但將...