相对定位绝对定位

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Example</title>
<style>
  /* 相对定位的父元素 */
  .relative-parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightblue;
    margin-bottom: 20px; /* 增加一些间距用于区分不同块 */
  }

  /* 绝对定位的子元素 */
  .absolute-child {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background-color: coral;
  }

  /* 绝对定位的父元素 */
  .absolute-parent {
    position: absolute;
    top: 1050px; /* 距离顶部250px */
    left: 200px; /* 距离左侧20px */
    width: 200px;
    height: 200px;
    background-color: lightcoral;
  }

  /* 绝对定位的子元素,相对于绝对定位的父元素 */
  .absolute-child-inside-absolute {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background-color: lightgoldenrodyellow;
  }

  /* 固定定位的父元素 */
  .fixed-parent {
    position: fixed;
    top: 20px;
    right: 20px; /* 固定在视口右上角 */
    width: 200px;
    height: 200px;
    background-color: lightgreen;
  }

  /* 绝对定位的子元素,相对于固定定位的父元素 */
  .absolute-child-inside-fixed {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 100px;
    height: 100px;
    background-color: lightpink;
  }
</style>
</head>
<body>

<div class="relative-parent">
  相对定位的父元素
  <div class="absolute-child">绝对定位的子元素</div>
</div>

<div class="absolute-parent">
  绝对定位的父元素
  <div class="absolute-child-inside-absolute">绝对定位的子元素</div>
</div>

<div class="fixed-parent">
  固定定位的父元素
  <div class="absolute-child-inside-fixed">绝对定位的子元素</div>
</div>

</body>
</html>

也可以多层嵌套

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Positioning Example</title>
<style>
  /* 外层相对定位的父元素 */
  .grandparent {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: lightblue;
    padding: 20px;
  }

  /* 中间绝对定位的父元素 */
  .parent {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 300px;
    background-color: lightcoral;
    padding: 20px;
  }

  /* 内层绝对定位的子元素 */
  .child {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    padding: 20px;
  }

  /* 孙子元素 */
  .grandchild {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: lightpink;
    padding: 20px;
  }
</style>
</head>
<body>

<div class="grandparent">
  外层相对定位的父元素
  <div class="parent">
    中间绝对定位的父元素
    <div class="child">
      内层绝对定位的子元素
      <div class="grandchild">
        孙子元素
      </div>
    </div>
  </div>
</div>

</body>
</html>
相关推荐
RainbowSea8 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴14 分钟前
笨方法学python -练习14
java·前端·python
Mintopia21 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia31 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农36 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye39 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤43 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务