21 绝对定位，固定定位 

position: relative
position: absolute;
posion: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){ /* 相对定位*/
      border: #a2148f 2px dashed;
      position: relative;
      left: 50px;
    }
    /* 绝对定位:
    1.相对浏览器
    2.父级元素标签定位后就相对父级标签
    */
    div:nth-of-type(2){  
      border: #a2148f 2px dashed;
      position: absolute;
      left: 100px;
    }
    div:nth-of-type(3){/* 固定定位:导航栏，广告什么的 */
      border: #a2148f 2px dashed;
      position: fixed;
      right: 50px;
    }
  </style>
</head>
<body>
<div>
  <div>d1</div>
  <div>d2</div>
  <br>
  <div>d3</div>
</div>
</body>
</html>
posted @   被占用的小海海  阅读(13)  评论(0)  编辑  收藏  举报
相关博文：
·  19 相对定位
·  20 相对定位练习
·  html---定位position（固定，相对（relative），绝对（absolute））
·  绝对定位和固定定位
·  position定位
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手