細說CSS樣式表中的position屬性

2021-09-05 21:56:23 字數 1041 閱讀 7873

在css中關於position定位的內容是:

position: relative | absolute | static | fixedstatic(靜態) 沒有特別的設定,遵循基本的定位規定,不能通過z-index進行層次分級。

relative(相對定位) 物件不可層疊、不脫離文件流,參考自身靜態位置通過 top,bottom,left,right 定位,並且可以通過z-index進行層次分級。

absolute(絕對定位) 脫離文件流,通過 top,bottom,left,right 定位。選取其最近乙個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,absolute元素將以body座標原點進行定位,可以通過z-index進行層次分級。

fixed(固定定位)這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。

css中定位的層疊分級:z-index: auto | namber;

auto 遵從其父物件的定位

namber  無單位的整數值。可為負數

relative(相對定位)只可以在文字流中進行位置的上下左右的移動,雖然他的表現區脫離了文字流,但是在文字流卻依然為其保留了一席之地,這就好比乙個打工的人他到了外地,但是在老家依然有乙個專屬於他的位置,這個位置不隨他的移動而改變。這樣很明顯就會空出一塊空白來,如果希望文字流拋棄這個部分就需要用到絕對定位。

absolute(絕對定位)不光脫離了文字流,而且在文字流中也不會給這個絕對定位元素留下專屬空位。這就好比是乙個工廠裡的職位,如果有乙個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過trbl(top、right、bottom、left簡稱trbl)來設定元素,使之處在任何乙個位置。在父層position屬性為預設值時,trbl的座標原點以body的座標原點為起始。

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

Css樣式表中 margin paddi

css樣式表中 margin padding和border 相淋 樣式表的精髓 margin和padding和border 一 padding 我們可以把加過樣式表的html標記看成是乙個盒子。對這個盒子中的內容控制,用到的樣式 padding 它又分為 padding left padding r...

CSS常用樣式表

常用的文字屬性 1.line height 設定行號,常用25px 28px 例 line height 25px 布局多行文字 2.text align 設定對齊方式,常用取值為left right center 例 text align center 各種元素對齊 3.letter spacin...