position樣式屬性

2021-10-08 03:21:20 字數 867 閱讀 1528

position:用於定義建立元素布局所用的定位型別,該屬性有多個值

1:static:預設值。沒有定位,

2:生成相對定位的標籤,相對於自己位置進行變換。例如:「left:20px」 會向標籤的left位置移動 20 畫素

3:absolute:相對於標籤本身第乙個position為非 static父元素進行定位,標籤通過 「left」, 「top」, 「right」 以及 「bottom」 樣式屬性進行定位。如果該標籤所在的父標籤均沒有設定position為非 static,則相對於瀏覽器視窗進行定位,但是此時元素會隨著滾動調的滑動而滑動。

4:fixed生成絕對定位的標籤,相對於瀏覽器視窗進行定位,此時元素不會隨著滾動調的滑動而滑動。元素通過 "left", "top", "right" 以及 "bottom" 屬性進行定位。

例如:

未在#second加(right: 10px; bottom: 10px;)浮動後: 

加上後相對於瀏覽器視窗進行定位,此時元素不會隨著滾動調的滑動而滑動。

將#second換為

#second
效果為:

改為: 

效果為:

CSS樣式布局 position屬性

position屬性 用於定義建立元素布局所用的定位型別,該屬性有多個值 值 描述 static 預設值。沒有定位,元素出現在正常流中 忽略 top,bottom,left,right 或者 z index 宣告 relative 生成相對定位的標籤,相對於標籤原來位置進行定位。因此,left 20...

樣式的position屬性說明

md ty a md ty a hover md ty a hover span 在樣式 md ty a hover span 中用到了position absolute 這個屬性告訴我們它是個浮動的。不過它的left top屬性告訴當前span居上居左的位置,可這個是相對誰來說的呢?並沒有明確指明...

細說CSS樣式表中的position屬性

在css中關於position定位的內容是 position relative absolute static fixedstatic 靜態 沒有特別的設定,遵循基本的定位規定,不能通過z index進行層次分級。relative 相對定位 物件不可層疊 不脫離文件流,參考自身靜態位置通過 top,...