HTML + CSS 连载 | 45 - 相对定位

一、相对定位

元素按照标准流布局,可以通过 top/right/bottom/left 四个位移属性进行定位,定位的参照对象是元素原来自己的位置,

top/right/bottom/left 用来设置元素的具体位置,对元素的作用如下图所示:

偏移 解释
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

相对定位的使用场景是在不影响其他元素位置的前提下,对当前元素位置进行微调

创建 HTML 页面,先设置三个上中下排列的盒子,并使他们居中显示,具体 HTML 代码如下所示:

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 100px;
      height: 300px;
      margin: 0 auto;
    }

    .box {
      width: 100px;
      height: 100px;
    }

    .box1 {
      background-color: #f00;
    }

    .box2 {
      background-color: #f0f;
    }

    .box3 {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面,效果如下:

接下来我们就可以对中间的盒子进行位置的调整,使用相对定位进行位置调整时,使用top/right/bottom/left设置位移量时参考的是元素原来的位置,比如我们可以设置元素距离原来左外边距为 100px,修改 .box2 选择器的 CSS 代码:

CSS 复制代码
.box2 {
  background-color: #f0f;
  position: relative;
  left: 100px;
}

刷新 HTML 页面,效果如下:

其他元素的位置没有收到影响,只是相对于距离原来自己的位置进行了右移了 100px,也就是距离原来自己位置的左外边距为100px。

还可以设置距离上外边距的距离,具体 CSS 代码如下所示:

CSS 复制代码
.box2 {
  background-color: #f0f;
  position: relative;
  left: 100px;
  top: 100px;
}

刷新页面,效果如下:

可以看到中间盒子分别向右和向下移动了 100px,也就是说距原来位置的上外边距和左外边距的距离为 100px。

top/right/bottom/left 同时也支持负数和百分数的设置,如果设置为负数,就是向属性名的同方向移动,比如设置如下 CSS 代码:

CSS 复制代码
.box2 {
  background-color: #f0f;
  position: relative;
  left: -100px;
  top: -100px;
}

刷新页面,效果如下:

可以看到中间的盒子向左向上移动了 100px。

相对定位的特点

相对定位具有如下的特点:

  • 相对定位的元素不会脱离文档流,元素位置的变化只是视觉上的效果变化,不会对其他元素产生任何影响,定位元素标准流中的位置依然会保留,其他非定位元素保持不变。
  • 定位元素的显示层级比普通元素高,所有的定位,显示层级都一样;也就是说定位元素会覆盖在普通元素上,同定位元素之间设置显示层级可以使用 z-index 来设置优先级。
  • left 不能和 right 一起设置;topbottom不能一起设置。
  • 相对定位的元素也能继续浮动,但不推荐。
  • 相对定位的元素也能通过 margin 调整位置,但不推荐。
  • 绝大多数情况下相对定位会与绝对定位配合使用。
相关推荐
foxhuli22932 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统