2025年position的8种定位方式

科技前沿 • 2025-01-06 15:22 • 阅读 77

大家好，我是讯享网，很高兴认识大家。

position定位的八种方式：

一、常见/用的四种

1.static

positon定位的默认值，没有定位

2.relative

生成相对定位的元素，相对于其正常位置(正常位置解释：关于包含块（containing block）的理解)进行定位，一般在子元素设置absoute定位时，给父元素设置relative

元素的位置通过top、right、bottom、left 控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

3.absolute

生成绝对定位的元素，相对于 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的值为不设置：

兼容：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标签不支持)