相对定位绝对定位

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 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程26 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041234 分钟前
Netty编解码器详解与实战
前端
袁煦丞38 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript