關於定位(position屬性)

2021-09-27 13:12:00 字數 730 閱讀 8405

1、absolute

2、fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

當元素祖先的 transform 屬性非 none 時,容器由視口改為其父元素。

3、relative

生成相對定位的元素,相對於其正常位置進行定位。不脫離文件流。

4、static

預設值。沒有定位,元素出現在正常的流中(忽略top,bottom,left,right或者z-index宣告)。

5、inherit

規定應該從父元素繼承position屬性的值。

6、sticky

css3新屬性,可以說是position:relative和position:fixed的合體。主要用在對scroll事件的監聽上。

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

2.頁面滾動時

使用條件:

1、父元素不能overflow:hidden或者overflow:auto屬性。

2、必須指定top、bottom、left、right4個值之一,否則其行為與相對定位相同。並且top和bottom同時設定時,top生效的優先順序高,left和right同時設定時,left的優先順序高。

3、父元素的高度不能低於sticky元素的高度

4、sticky元素僅在其父元素內生效

例子:標題吸頂

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

position屬性定位

1 html中有三種布局方式 標準流 順序布局 浮動 定位 層模型 position 塊級元素單獨佔一行從上到下排列,行內元素共享一行 position改變元素正常的標準流,以非正常的方式脫離標準流 需要有left right top bottom設定值,否則仍然是處於標準的文件流中的 後寫的元素會...

定位 position屬性

一.定位 position屬性 1.static 預設值 沒有定位 以標準文件流方式顯示 2.relative 相對定位 相對自身原來的位置進行偏移 top left right bottom 3.absolute 絕對定位 4.fixed 固定定位 二.相對定位元素的規律 1.設定相對定位的盒子會...