定位position各種屬性

2021-10-04 08:05:03 字數 608 閱讀 5689

定位:position

static 預設值,設定座標無效

absolute 絕對定位

特徵:1:脫離文件流,不佔位置

2: 預設參考html的00點(瀏覽器零點)

3: 如果有父級,且父級有定位,那就參考父級元素(預設定位除外) 相當於給子元素指定了參考物

座標位置 :

水平 left right

垂直top bottom

relative: 相對定位

特徵:1: 佔據文件流,佔位置

2: 參考自身載入在頁面中的位置

absolute 絕對定位

1: 不佔據位置,脫離文件流

2: 預設參考html元素(瀏覽器)改變在頁面中的位置,假如有定位父級,則參考父級元素

fixed: 固定定位

特徵:1: 脫離文件流,不佔位

2: 元素固定在頁面中不隨著頁面滾動而滾動

3: 參考瀏覽器的00點

sticky: 粘性定位

特徵:1: 頁面達到一定高度時,脫離文件流

2: 效果是吸附瀏覽器頂部

z-index:層級;

有定位的元素才可以修改層級關係

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.設定相對定位的盒子會...