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

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

2023-02-19 74
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 定位绝对定位相对定位固定定位 
<!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
目录
相关文章
大树营养快线
|
1月前
|
前端开发
除了伪元素清除法，还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求，在实际开发中，需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
大树营养快线
60 2
大树营养快线
|
1月前
在使用 Flexbox 布局实现自适应宽度的品字布局时，子元素的排列顺序是否可以调整？
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时，可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序，以满足不同的设计和布局需求。
大树营养快线
26 0
热爱技术的小郑
|
4月前
|
前端开发
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式：相对定位、绝对定位和固定定位，并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
热爱技术的小郑
95 0
HTML+CSS基础知识（5）相对定位、绝对定位、固定定位
游客fz577umxdejsg
|
4月前
|
前端开发 UED 容器
深入理解定位布局：绝对定位与相对定位
深入理解定位布局：绝对定位与相对定位
游客fz577umxdejsg
86 0
朝阳39
|
5月前
|
前端开发
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
朝阳39
97 1
朝阳39
|
5月前
|
前端开发 容器
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
朝阳39
146 0
景天科技苑
|
7月前
|
前端开发 容器
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
景天科技苑
57 1
find_starshine
|
7月前
浮动和定位
浮动和定位
find_starshine
46 0
Clover&lsquo;sBlog
【固定定位和绝对定位】
【固定定位和绝对定位】
Clover&lsquo;sBlog
78 0
吃豆子的恐龙
盒子模型、浮动、定位
盒子模型、浮动、定位
吃豆子的恐龙
81 0