CSS 定位基础

学习

CSS 定位基础

2026-02-23/0/ 编辑

CSS 定位基础

一、position 属性概述

CSS 中 position 属性用于指定一个元素在文档中的定位方式。

1.1 定位类型

属性值描述
static没有定位,元素出现在正常的流中(默认值)
relative相对定位,相对于自身正常位置进行位置的调整
absolute绝对定位,相对于其最近的定位的父元素定位
fixed固定定位,相对于浏览器窗口进行位置调整
sticky粘性定位,基于用户的滚动位置来定位
注意: static 相当于元素没有加定位效果,如果元素加了定位,后面需要去掉,可以添加 position: static;

二、相对定位

2.1 基本概念

盒子可以相对自己原来的位置进行位置调整,称之为相对定位。

语法:

position: relative;

2.2 位置属性

属性描述值
top向下移动正数/负数
bottom向上移动正数/负数
left向右移动正数/负数
right向左移动正数/负数

2.3 相对定位的特点

  • ✅ 相对自身正常位置(即:未使用定位前的位置)进行定位
  • ✅ 元素的初始位置占据的空间会被保留
  • ✅ 相对定位元素不会对其它元素产生任何影响
  • ✅ 自身的层级会提升半层

2.4 案例演示

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box2 {
    background-color: pink;
  }
  .box2 {
    /* 相对定位 */
    position: relative;
    /* 左偏移 20px */
    left: 20px;
    /* 上偏移20px */
    top: 20px;
  }
</style>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</body>

2.5 总结

相对定位的元素,会在"老家留坑",本质上仍然是在原来的位置,即:元素的初始位置占据的空间会被保留,只不过渲染在新的地方而已,渲染的图形可以比喻成影子,不会对页面其他元素产生任何影响。

三、相对定位应用场景

场景1: 微调元素位置

悬停卡片效果:

<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 480px;
    margin: 150px auto;
  }
  ul li {
    width: 100px;
    height: 120px;
    background-color: pink;
    margin: 0px 10px;
    float: left;
  }
  /* 鼠标滑动到li上,li设置为相对定位 */
  ul li:hover {
    position: relative;
    top: -10px;
    left: 2px;
  }
</style>

场景2: 做绝对定位的参考盒子

<style>
  .parent {
    position: relative; /* 子元素绝对定位的参考对象 */
  }
  .child {
    position: absolute; /* 相对于.parent定位 */
    left: 0;
    top: 0;
  }
</style>

场景3: 提升自身层级

<style>
  .nav-item {
    position: relative;
    z-index: 1; /* 提升层级 */
  }
</style>

四、绝对定位

4.1 基本概念

绝对定位的元素,是相对离自己最近的定位祖先元素进行位置调整。

语法:

position: absolute;

4.2 绝对定位 7 大特性

特性说明
1️⃣绝对定位元素脱离文档流,释放原本所占据的空间,同时层级提升
2️⃣绝对定位的元素,相对离自己最近的定位祖先元素进行位置调整
3️⃣如果没有定位的祖先元素,则相对 body 进行位置调整
4️⃣行内元素加上定位后,其具有行内块元素特性,支持宽高设置
5️⃣块级元素没有设置宽度的情况下,如果加了绝对定位,宽度自动为内容宽
6️⃣margin:0 auto; 水平居中失效
7️⃣定位元素未设置宽高情况下,同时设置 top 和 bottom 会改变元素高,同时设置 left 和 right 会改变元素宽

4.3 案例演示

相对最近的定位祖先元素:

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位,是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box2 {
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 50px;
  }
</style>

五、固定定位

5.1 基本概念

固定定位本质:

  • 固定定位是相对于浏览器窗口(视口)进行定位
  • 但固定定位元素的祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时,固定位位相对于该祖先元素定位

语法:

position: fixed;
top: 100px; /* 与浏览器顶部距离 */
left: 100px; /* 与浏览器左边距离 */

5.2 应用场景

不管浏览器的滚动条如何滚动,元素始终相对浏览器窗口的位置不变。

  • 返回顶部
  • 楼梯式导航
  • 右侧悬浮菜单
  • 顶部与底部通栏广告

六、粘性定位

6.1 基本概念

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

语法:

position: sticky;
top: 0px; /* 与顶部距离 */

6.2 应用场景

  • 导航吸附效果
  • 表格首行冻结
  • 字母排序显示
  • 头部和左侧吸顶盒

七、定位总结

定位类型描述应用场景
relative相对自身原来的位置定位,占着原来的位置微调元素的位置,但还占据原来空间;只想提升元素的层级,但还是占原来的空间
absolute相对离自己最近的定位的父元素定位,原来的位置被释放,相当于悬浮在页面中一个元素想覆盖在另一个元素上面;配合 JS 来实现动画效果
fixed相对浏览器窗口进行定位你想让一个元素相对浏览器的位置一直不动
sticky相对离自己最近的拥有滚动机制的父元素定位导航吸附效果,表格首行冻结效果
猜你喜欢