頁面元素層級關係

2022-06-10 08:48:13 字數 744 閱讀 9710

具有定位的元素的層級, 預設是後面的元素比前面的元素的層級高----(這是對同級元素來說)

標準流盒子低於浮動的盒子,浮動的盒子又低於定位的盒子。

定位(relative,absolute,fixed)高於浮動,浮動高於標準流。

給定z-index的值為層級的值時。(不給預設為0)----》

(層級為0的盒子,也比標準流和浮動高。)

(層級為負數的盒子,比標準流和浮動低。)

(層級不取小數)

(層級一樣,後面的盒子比前面的層級高。)

(浮動或者標準流的盒子,

後面的盒子比前面的層級高。)

定位中:abselute是不佔位置的,relative是站位的的。而層級的高低,是和佔不佔位置沒有關係的。

浮動元素佔兩層問題:  

x(如果元素浮動, 那麼是占用標準文件流中的位置的, 但是同時占用所在層級的位置, 好像和relative定位相同)

上面這句話好像是錯的.....

當初得出上句話結論的時候是因為看到文字並沒有顯示在浮動元素內部, 而是緊貼著浮動的元素, 後來發現, 那是因為浮動元素會有"字圍"效果.

但是, 浮動元素確實是仍然占用標準文件流中的位置.

關於浮動的其它問題, 詳細可參考:

補充:子元素如果不設定大小, 會預設與父元素同等寬度, 高度的話是由自己的內容決定的.

position 元素層級

1 position設定元素的定位方式 left right top bottom相當於座標點和參考點的關係 1 預設值為static 靜態 2 relative 相對定位 相對於自己的位置偏移 3 absolute 絕對定位 相對於非static最近的父級元素 一般來說是relative的 4 f...

元素層級提高

定位元素中z index不等於auto,為大於0的值 元素設定opacity為不等於1的值 元素的transform屬性不為none will change指定的屬性值為上面任意乙個 了解 層級上下文 title style body box wrap wrap 1 wrap 2 wrap 3 wr...

jQuery的層級關係

jquery的層級關係 jquery層級關係分為祖先關係 父子關係 兄弟關係 下面來一一介紹如何表示這些關係 以以下的html 為例 one 使用者名稱 text id name button id value 查詢 tby 使用者名稱 text id name 性別 text id 密碼 text...