relative 相对于自身原位置偏移但保留占位;2. absolute 脱离文档流,相对于最近非 static 祖先定位;3. fixed 相对于视口固定,不随滚动移动。
在HTML和CSS中,position 属性用于控制元素的定位方式。常见的取值有 relative、absolute 和 fixed,它们的行为和使用场景各不相同。
position: relative(相对定位)
元素相对于其正常文档流中的位置进行偏移。设置 top、right、bottom、left 会使其相对于原本的位置移动,但原来占据的空间仍然保留。
- 不脱离文档流
- 偏移后原位置仍被占用
- 常用于为绝对定位元素设置参考父容器
例如:
设置 top: 10px; left: 20px; 后,元素从原位置向下移动10px,向右移动20px,但原来的位置空着。
position: absolute(绝对定位)
元素脱离文档流,相对于最近的已定位(非 static)的祖先元素进行定位。如果没有这样的祖先,则相对于初始包含块(通常是视口)。
- 脱离文档流,不占空间
- 定位基准是最近的 position 不为 static 的父级
- 常用于弹窗、下拉菜单、图层叠加等场景
例如:
在一个 position: relative 的 div 内部设置 position: absolute; top: 0; left: 0; 可使子元素定位到该 div 的左上角。
position: fixed(固定定位)
元素脱离文档流,相对于浏览器视口进行定位,不会随页面滚动而移动。
立即学习“前端免费学习笔记(深入)”;
- 常用于导航栏、返回顶部按钮等需要始终可见的组件
- 定位基准是视口(viewport),不是父元素
- 即使页面滚动,元素位置保持不变
例如:
设置 position: fixed; bottom: 10px; right: 10px; 的元素会一直显示在屏幕右下角。
基本上就这些。理解它们的关键在于定位参照物不同:relative 是自身原位,absolute 是最近定位祖先,fixed 是浏览器窗口。
以上就是HTMLpositionrelativeabsolutefixed格式属性html css 浏览器 区别 绝对定位 相对定位 固定定位 css html Static position viewport