相对定位绝对定位

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>
相关推荐
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课9 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿10 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我10 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法