CSS常用的两种定位方式

在CSS中,absoluterelative 是两种常用的定位方式,分别通过 position 属性进行设置。它们用于控制元素在页面中的位置。理解这两种定位方式对于布局和设计响应式页面非常重要。

position: relative

定义

relative 定位是相对自身原始位置进行偏移。

特性
  • 元素仍然占据其在正常文档流中的空间,但可以通过 top, right, bottom, left 属性进行偏移。
  • 偏移量是相对于元素本来的位置进行的。
  • 不会影响其他元素的布局,因为它仍然保留在文档流中。
示例
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Position Example</title>
  <style>
    .relative-box {
      position: relative;
      top: 20px; /* 相对于其原始位置向下偏移20像素 */
      left: 30px; /* 相对于其原始位置向右偏移30像素 */
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="relative-box">Relative Box</div>
</body>
</html>

position: absolute

定义

absolute 定位是相对于最近的已定位(relative, absolute, fixed, sticky)祖先元素进行偏移。如果没有已定位的祖先元素,则相对于初始包含块(通常是视口)进行定位。

特性
  • 元素脱离正常文档流,不再占据空间,其他元素会忽略它的位置。
  • 通过 top, right, bottom, left 属性进行偏移,相对于最近的已定位祖先元素。
  • 如果没有找到已定位的祖先元素,则相对于视口进行定位。
示例
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Position Example</title>
  <style>
    .container {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }

    .absolute-box {
      position: absolute;
      top: 20px; /* 相对于最近的已定位祖先元素向下偏移20像素 */
      left: 30px; /* 相对于最近的已定位祖先元素向右偏移30像素 */
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute-box">Absolute Box</div>
  </div>
</body>
</html>

比较与总结

  • position: relative

    • 相对自身原始位置进行偏移。
    • 元素仍占据原始位置的空间。
    • 用于微调元素位置,不会影响其他元素的布局。
  • position: absolute

    • 脱离文档流,相对于最近的已定位祖先元素进行定位。
    • 不占据空间,其他元素会忽略它的位置。
    • 用于精确定位元素,通常与 relative 定位的祖先元素配合使用。

结合使用

relativeabsolute 定位经常结合使用,以实现复杂的布局效果。典型的用法是将容器元素设置为 relative 定位,而内部的子元素设置为 absolute 定位,这样子元素可以相对于容器元素进行定位。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combined Position Example</title>
  <style>
    .relative-container {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: lightgray;
    }

    .absolute-child {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="relative-container">
    <div class="absolute-child">Child</div>
  </div>
</body>
</html>

在这个例子中,.absolute-child 会相对于 .relative-container 的位置进行偏移,从而实现精确定位。

相关推荐
爱吃青椒不爱吃西红柿‍️7 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你10 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜13 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑21 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX23 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12532 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12539 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun0011 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript