相对定位绝对定位

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>
相关推荐
疾风铸境10 分钟前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
晓风伴月14 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态17 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
爱泡脚的鸡腿32 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ1 小时前
前端处理pdf文件流,展示pdf
前端·pdf
智践行1 小时前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态1 小时前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
树上有只程序猿1 小时前
Java程序员需要掌握的技术
前端
从零开始学安卓1 小时前
Kotlin(三) 协程
前端