AI 助理
备案控制台
开发者社区 云计算 文章 正文

定位绝对定位相对定位固定定位

2023-02-19 69
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 定位绝对定位相对定位固定定位 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子绝父相</title>
  <style type="text/css">
    div{
      height: 200px;
      width: 200px;
      background-color: lightcyan;
      border: 3px solid red;
      line-height: 200px;
    }
    .box1{
      width: 300px;
      position: absolute;
      left: 200px;
    }
    .box2{
      width: 200px;
      background-color: lavenderblush;
      position: absolute;
      left: 210px;
      bottom:200px;
      border: 2px solid rebeccapurple;
    }
  </style>
</head>
<body>
  <h1>绝对定位</h1>
  <div class="box">
    绝对定位的原来的位置@1
  </div>
  <div class="box1">
    <!-- 向left移动了200px -->
    对定位的原来的位置@2
  </div>
  <img  src="../images/teacher8_03.png" class="box2"/>
    <!-- 向下移动了200px -->
    对定位的原来的位置@3
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <hr>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子绝父相</title>
  <style type="text/css">
    div{
      height: 100px;
      width: 200px;
      background-color: #2e2b2b ;
      opacity: 0.9;
      border: 3px solid red;
      line-height: 100px;
    }
    .box1{
      width: 200px;
      position: absolute;
      left: 210px;
      bottom: 220px;
      right: 200px;
      top: 280px;
      text-align: left;
      line-height: 10px;
    }
    .box1::before{
      content: "老师名称";
      color: aliceblue;
    }
    .box2{
      width: 200px;
      background-color: lavenderblush;
      position: absolute;
      top: 100px;
      left: 210px;
      bottom:200px;
      border: 2px solid rebeccapurple;
    }
    .box3{
      width: 200px;
      position: absolute;
      left: 210px;
      bottom: 600px;
      right: 200px;
      top: 480px;
    }
    .box4::before{
      content: "12345";
      color: aliceblue;
      color: red;
      right: 200px;
    }
    .box4{
      width: 200px;
      background-color: lavenderblush;
      position: absolute;
      top: 600px;
      /* 向右的目的又是向left */
      right: 210px;
      bottom:600px;
      border: 2px solid rebeccapurple;
    }
  </style>
</head>
<body>
  <h1>绝对定位 案例</h1>
  <!-- <div class="box">
    绝对定位的原来的位置@1
  </div> -->
  <img  src="../images/teacher8_03.png" class="box2"/>
  <div class="box1">
    <!-- 向left移动了200px -->
    <!-- 对定位的原来的位置 -->
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <img  src="../images/teacher8_03.png" class="box3"/>
  <div class="box4">
    <!-- 向left移动了200px -->
    <!-- 对定位的原来的位置 -->
  </div>
    <!-- 向下移动了200px -->
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子绝父相</title>
  <style type="text/css">
    *{
      margin: 1%;
    }
    div{
      height: 200px;
      width: 200px;
      background-color: #2e2b2b ;
      opacity: 0.9;
      border: 3px solid red;
      line-height: 100px;
      color: aliceblue;
    }
    .box1{
      width: 200px;
      position: relative;
      left: 200px
    }
    .box2{
      width: 200px;
      position: relative;
      left: 300px;
      right: 200px;
      opacity: 0.9;
    }
    .box3{
      /* position: absolute; */
      position: relative;
      left: 300px;
      right: 200px;
      bottom: 100px;
      background-color: aliceblue;
      color: red;
      border: 3px solid green;
      opacity: 0.9;
    }
    .box4{
      /* position: absolute; */
      position: relative;
      left: 300px;
      right: 200px;
      bottom: 200px;
      background-color: aliceblue;
      top: 100px;
      color: red;
      border: yellow 4px solid ;
    }
  </style>
</head>
<body>
  <h1>相对对定位 案例</h1>
  <div class="box">
    相对对定位的原来的位置1
  </div>
  <div class="box1">
  相对对定位的原来的位置2
  </div>
  <div class="box2">
    相对对定位的原来的位置3
  </div>
  <div class="box3">
    相对对定位的原来的位置4
  </div>
  <div class="box4">
    相对对定位的原来的位置5
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子绝父相</title>
  <style type="text/css">
    div{
      /* border: 3px solid red; */
      line-height: 100px;
      float: left;
    }
    .one1{
      position: absolute;
      border:  3px solid lightblue ;
      height:100%;
      width:100%;
      display: flex;
    }
    .one2{
      position: relative;
      border:  3px solid lightblue ;
      height:100%;
      width:100%;
      display: flex;
      top: 300px;
    }
    .one3{
      position: relative;
      border:  3px solid lightblue ;
      height:100%;
      width:100%;
      display: flex;
      top: 300px;
    }
    .box1{
      justify-content: flex-end;
      width: 100%;
      position: relative;
      /* left: 212px; */
      left: 10px;
      /* bottom: 220px; */
      /* right: 200px; */
      top: 200px;
      text-align: left;
      line-height: 10px;
      width: 200px;
      height: 100px;
      width: 200px;
      background-color: #2e2b2b ;
      opacity: 0.9;
      border: 2px solid black;
    }
    .box1::before{
      content: "老师名称1";
      color: aliceblue;
    }
    .box2{
      width: 200px;
      background-color: lavenderblush;
      position: absolute;
      top: 50x;
      left: 10px;
      /* bottom:200px; */
      border: 2px solid rebeccapurple;
    }
  /* 第二张图片 */
  .box3{
    width: 100%;
    position: relative;
    /* left: 212px; */
    left: 16px;
    /* bottom: 220px; */
    /* right: 200px; */
      top: 200px;
  /*  top: 180px; */
    text-align: left;
    line-height: 10px;
    width: 200px;
    height: 100px;
    width: 200px;
    background-color: #2e2b2b ;
    opacity: 0.9;
    border: 2px solid black;
  }
  .box3::before{
    content: "老师名称2";
    color: aliceblue;
  }
  .box4{
    width: 200px;
    background-color: lavenderblush;
    position: absolute;
    top: 50x;
    left: 220px;
    /* bottom:200px; */
    border: 2px solid rebeccapurple;
  }
  /* 3 */
  .box5{
    width: 200px;
    background-color: lavenderblush;
    position: absolute;
    top: 50x;
    left: 430px;
    /* bottom:200px; */
    border: 2px solid rebeccapurple;
  }
  .box6{
    width: 100%;
    position: relative;
    /* left: 212px; */
    left: 22px;
    /* bottom: 220px; */
    /* right: 200px; */
      top: 200px;
  /*  top: 0px; */
    text-align: left;
    line-height: 10px;
    top: 0;
    width: 200px;
    height: 300px;
    width: 200px;
    background-color: #2e2b2b ;
    opacity: 0.4;
    border: 2px solid black;
  }
  .box6::before{
    content: "老师名称3";
    color: aliceblue;
  }
  .box7{
    width: 200px;
    background-color: lavenderblush;
    position: absolute;
    top: 50x;
    left: 640px;
    /* bottom:200px; */
    border: 2px solid rebeccapurple;
  }
  .box8{
    width: 100%;
    position: relative;
    /* left: 212px; */
    left: 28px;
    /* bottom: 220px; */
    /* right: 200px; */
      top: 200px;
  /*  top: 180px; */
    text-align: left;
    line-height: 10px;
    width: 200px;
    height: 100px;
    width: 200px;
    background-color: #2e2b2b ;
    opacity: 0.9;
    border: 2px solid black;
  }
  .box8::before{
    content: "老师名称4";
    color: aliceblue;
  }
  .box9{
    width: 200px;
    background-color: lavenderblush;
    position: absolute;
    top: 50x;
    left: 850px;
    /* bottom:200px; */
    border: 2px solid rebeccapurple;
  } 
  .box10{
    width: 100%;
    position: relative;
    /* left: 212px; */
    left: 33px;
    /* bottom: 220px; */
    /* right: 200px; */
      top: 200px;
  /*  top: 180px; */
    text-align: left;
    line-height: 10px;
    width: 200px;
    height: 100px;
    width: 200px;
    background-color: #2e2b2b ;
    opacity: 0.9;
    border: 2px solid black;
  }
  .box10::before{
    content: "老师名称5";
    color: aliceblue;
  }
  </style>
</head>
<body>
  <div style="color: red; background-color:#fff;" class="one1">
  <img  src="../images/teacher8_03.png" class="box2"/>
  <div class="box1">
    <!-- 向left移动了200px -->
    <!-- 对定位的原来的位置 -->
  </div>
  <!-- !-- 第一张图片-- -->
  <img  src="../images/teacher1_03.png" class="box4"/>
  <div class="box3">
    <!-- 第二张图片 -->
  </div>
  <img  src="../images/teacher2_03.png" class="box5"/>
  <div class="box6">
    <!-- 第3张图片 -->
  </div>
  <img  src="../images/teacher3_03.png" class="box7"/>
  <div class="box8">
    <!-- 第4张图片 -->
  </div>
  <img  src="../images/teacher6_03.png" class="box9"/>
  <div class="box10">
    <!-- 第5张图片 -->
  </div>
  </div>
  <div style="color: red; background-color:#fff;" class="one2">
  <img  src="../images/teacher8_03.png" class="box2"/>
  <div class="box1">
    <!-- 向left移动了200px -->
    <!-- 对定位的原来的位置 -->
  </div>
  <!-- !-- 第一张图片-- -->
  <img  src="../images/teacher1_03.png" class="box4"/>
  <div class="box3">
    <!-- 第二张图片 -->
  </div>
  <img  src="../images/teacher2_03.png" class="box5"/>
  <div class="box6">
    <!-- 第3张图片 -->
  </div>
  <img  src="../images/teacher3_03.png" class="box7"/>
  <div class="box8">
    <!-- 第4张图片 -->
  </div>
  <img  src="../images/teacher6_03.png" class="box9"/>
  <div class="box10">
    <!-- 第5张图片 -->
  </div>
  </div>
  <div style="color: red; background-color:#fff;" class="one3">
  <img  src="../images/teacher8_03.png" class="box2"/>
  <div class="box1">
    <!-- 向left移动了200px -->
    <!-- 对定位的原来的位置 -->
  </div>
  <!-- !-- 第一张图片-- -->
  <img  src="../images/teacher1_03.png" class="box4"/>
  <div class="box3">
    <!-- 第二张图片 -->
  </div>
  <img  src="../images/teacher2_03.png" class="box5"/>
  <div class="box6">
    <!-- 第3张图片 -->
  </div>
  <img  src="../images/teacher3_03.png" class="box7"/>
  <div class="box8">
    <!-- 第4张图片 -->
  </div>
  <img  src="../images/teacher6_03.png" class="box9"/>
  <div class="box10">
    <!-- 第5张图片 -->
  </div>
  </div>
</body>
</html>

t75yjb52rsccc
目录
相关文章
热爱技术的小郑
|
3月前
|
前端开发
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式：相对定位、绝对定位和固定定位，并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
热爱技术的小郑
62 0
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
游客fz577umxdejsg
|
3月前
|
前端开发 UED 容器
深入理解定位布局：绝对定位与相对定位
深入理解定位布局：绝对定位与相对定位
游客fz577umxdejsg
61 0
朝阳39
|
4月前
|
前端开发
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
朝阳39
58 1
朝阳39
|
4月前
|
前端开发 容器
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
朝阳39
38 0
景天科技苑
|
6月前
|
前端开发 容器
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
景天科技苑
38 1
爱吃糖的范同学
|
6月前
|
前端开发 开发者 容器
【Web 前端】相对定位，绝对定位，固定定位的区别？
【4月更文挑战第22天】【Web 前端】相对定位，绝对定位，固定定位的区别？
爱吃糖的范同学
508 0
find_starshine
|
6月前
浮动和定位
浮动和定位
find_starshine
42 0
Clover&lsquo;sBlog
【固定定位和绝对定位】
【固定定位和绝对定位】
Clover&lsquo;sBlog
70 0
吃豆子的恐龙
盒子模型、浮动、定位
盒子模型、浮动、定位
吃豆子的恐龙
74 0
greework
|
移动开发 前端开发
关于H5中的相对定位与绝对定位区别的思考
关于H5中的相对定位与绝对定位区别的思考
greework
170 0