position的8種定位方式

2021-08-28 05:27:05 字數 1870 閱讀 6492

position定位的八種方式: 

1.staticpositon定位的預設值,沒有定位

2.relative

生成相對定位的元素,相對於其正常位置進行定位,一般在子元素設定absoute定位時,給父元素設定relative

元素的位置通過top、right、bottom、left  控制,其值的定位起點都是是父元素左上角(這點和absoute、fixed不一樣)

3.absoute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位

元素的位置通過top、right、bottom、left  控制,top、left的定位起點是包含塊左上角,right、bottom的定位起點是包含塊右下角

4.fixed  (ie6不相容)

生成絕對定位的元素,相對於瀏覽器視窗進行定位,和absoute的區別是fixed不會跟隨螢幕滾動(常見的各種貼屏廣告)

元素的位置通過top、right、bottom、left  控制,top、left的定位起點是包含塊左上角,right、bottom的定位起點是包含塊右下角

1.inherit規定應該從父元素繼承 position 屬性的值

inherit 關鍵字可用於任何 html 元素上的任何 css 屬性

相容:ie7及以下版本不支援此屬性

2.initial

設定positon的值為預設值(static)

相容:ie不支援此屬性

問:有了static為什麼還會存在此屬性,不是多此一舉?

答:initial關鍵字可用於任何 html 元素上的任何 css 屬性,不是postion特有的

3.unset

設定positon的值為不設定:

如果該屬性的預設屬性是 繼承屬性(例如字型相關的預設屬性基本都是繼承),該值等同於 inherit

如果該屬性的預設屬性 不是繼承屬性(例如pisition的預設屬性為static),該值等同於 initial

相容:ie不支援此屬性

4.sticky

css3新屬性,它的表現就像position:relative和position:fixed的合體:

1.在目標區域在螢幕中可見時,它的行為就像position:relative;

2.頁面滾動時

當父元素是body時

a.滾動距離小於螢幕高度或寬度,它會固定在目標位置

b.滾動距離大於螢幕高度或寬度,它的表現就像position:relative和1一樣

當父元素不是body,在父元素高度內滾動時它會固定在目標位置,就像fixed

在父元素滾動為不可視時它的表現就像position:relative和1一樣

相容: ie不相容、google不完全相容(thead、tr標籤不支援)、firefox59以後相容,之前版本不完全相容(table標籤不支援)

8種元素定位方式

8種元素定位方式 xpath和css selector比較 css selector執行效率比id還快,因為 原始碼中by id 方法會被自動轉成css 方法處理 css selector的使用 1 通過css selector的方式,可以採用任意的屬性來定位元素,只需要在屬性的兩邊加一對中括號即可...

selenium的8種定位方式的介紹

selenium主要提供了以下的8種定位方式 單個元素的定位方式 定位方式 方法使用id定位 find element by id id值 使用class定位 find element by class name class值 使用name定位 find element by name name值 ...

CSS 各種定位(position)方式的區別

position relative absolute fixed static inheri absolute 生成絕對定位的元素,相對於最近一級的 定位不是 static 的父元素來進行定位。fixed 老ie不支援 生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。relativ...