position定位布局

2021-10-07 20:25:45 字數 1909 閱讀 5586

值:

static 預設值,沒有定位,可以取消繼承的定位屬性

relative 相對定位,相對於元素自身在文件流的位置定位,不脫離標準流

absolute 絕對定位,相對於最近的乙個定位了的父元素,脫離標準流,不再佔據位置

fixed 固定定位,相對於瀏覽器視窗進行定位,脫離標準流,不再佔據位置

sticky 粘性定位 相對於瀏覽器視窗進行定位,脫離標準流,不再佔據位置

後四種定位配合left,right,bottom,top屬性進行定位

脫離標準流的定位元素還可以設定z-index來改變層級關係,層級越高,顯示在越上層

相對定位的元素相對於自身原本所在的位置進行定位

可以設定偏移量

元素任然保持未定位前的狀態,原本所佔據的空間任然保留

案例:html**:

"box1">box1

"box2">box2

css**:

.box1

.box2

效果:

絕對定位的元素脫離標準流,不會佔據原先的位置,後面未定位的元素會頂替前面的已絕對定位的元素的位置,但顯示會在絕對定位元素的下層

內嵌元素絕對定位後可以設定寬高

案例:html**

"box1">box1

"box2">這是box1後面的片標籤

css**:

.box1

.box2

效果如下:

絕對定位後的元素以最近乙個定位的父元素為參照物來進行定位,如果沒有定位的父元素則以body為準

一般絕對定位會配合相對定位來使用,即父元素設定相對定位,子元素設定絕對定位

html**:

"box1">

box1

"box2">box2

css**:

.box1

.box2

固定定位後的元素相對於瀏覽器視窗來定位,,且不會影響其他元素的布局,會一直固定在定位的位置。

html**:

"box2">

"box1">box1

css**:

.box1

.box2

效果:

粘性定位的元素必須設定left,right,top,bottom屬性中的乙個

html**:

"box2">

"box1">box1

"box3">

css**:

.box1

.box2

.box3

效果:

滾動條在最上面的時候

滾動條下移時,box1到達最頂端時不再移動

position(定位)布局

屬性值 說明static 預設值。沒有定位,元素按照標準文件流布局 inherit 繼承父元素的position值 relative 相對定位,盒子的位置以標準文件流的排版方式為基準,然後相對於它原本的標準位置偏移,相對定位的盒子仍然在標準流中。absolute 絕對定位,盒子的位置以它最靠近的已經...

CSS布局定位 position

取值 static absolute fixed relative static 預設值。無特殊定位 物件遵循html定位規則。absolute 絕對定位 將物件從文件流中拖出 可層疊 用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在...

css的定位(Position 布局

當乙個元素具有position absolute屬性時,它的位置由下列規則確定 1 如果該元素沒有trbl,以父元素 直接父元素 中在其之前的元素逐一定位後,緊跟最後乙個元素定位,若之前沒有其他元素,則以父元素的左上角定位。沒有直接父元素時,以其之前的元素逐一定位後,緊跟最後乙個元素定位。2 如果設...