position屬性在父級元素和子級元素中的影響

2021-07-25 07:32:04 字數 1658 閱讀 9240

父層class="zi1">子層1div>

class="zi2">子層2div>

div>

body>

html>兩個父級物件新增position:absolute後:

將最外層的父級物件去掉後:

保留最外層父物件的position:absolute,取消第二層的div的絕對定位:

設定該屬性後,物件會脫離正常文件流,而不考慮它周圍內容的布局

要啟用物件的絕對定位,則一定要設定top,bottom,left,right屬性中的乙個或以上,並且要設定position:absolute

當設定position:absolute

如果父級(無限)沒有設定position屬性,那麼當前的absolute則結合trbl屬性以瀏覽器左上角為原始點進行定位

如果父級(無限)設定position屬性,那麼當前的absolute則結合trbl屬性以父級(最近)的左上角為原始點進行定位。

(trbl分別代表了top,right,bottom,left屬性)

當設定position: relative

設定該屬性後,物件會保持在常規文件流中,但位置會根據前乙個物件進行一定的偏移。

則參照父級(最近)的內容區的左上角為原始點結合trbl屬性進行定位(或者說相對於被定位元素在父級內容區中的上乙個元素進行偏移),無父級則以body的左上角為原始點。相對定位是不能層疊的。在使用相對定位時,無論元素是否進行移動,元素依然佔據原來的空間(z-index)。因此,移動元素會導致它覆蓋其他框。

一般來講,網頁居中的話用absolute就容易出錯,因為網頁一直是隨著解析度的大小自動適應的,而absolute則會以瀏覽器的左上角為原始點,不會應為解析度的變化而變化位置。有時還需要依靠z-index來設定容器的上下關係,數值越大越在最上面,數值範圍是自然數。當然有一點要注意,父子關係是無法用z-index來設定上下關係的,一定是子級在上父級在下。

絕對定位和相對定位的一些區別:

在相對(relative)定位物件之後的文字或物件占有他們自己的空間而不會覆蓋被定位物件的自然空間。與此不同的,在絕對(absolute)定位物件之後的文字或物件在被定位物件被拖離正常文件流之前會占有它的自然空間。其實對於定位的主要問題是要記住每個定位的意義。相對定位是「相對於「元素在文件流中初始位置的,而絕對定位是」相對於「最近的已經定位的祖先元素。

使用 position突破父元素大小限制

html class div1 class div2 class div3 div div div html div3受div2大小限制,用position突破,在div2前新增div1,div1使用position relative div3使用position absolute 由於div2沒有...

浮動元素撐起父級元素

浮動會使元素脫離文件流,如果不設定父級高度,父級將失去高度,影響頁面布局。這裡總結了一些常用的方法,是父級 有高度 1.設定父級高度 設定乙個合適的高度,這種方法比較適用於元素高度固定的場景。2.設定父級元素 overflow hidden 這種方法比較簡單,但要確保父級元素沒有溢位樣式。3.設定父...

jquery獲取父級元素 子級元素 兄弟元素的方法

jquery.parent expr 找父親節點,可以傳入expr進行過濾,比如 span parent 或者 span parent class jquery.parents expr 類似於jquery.parents expr 但是是查詢所有祖先元素,不限於父元素 jquery.childre...