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

简介: 定位绝对定位相对定位固定定位
<!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>

相关文章
|
17天前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
3月前
|
前端开发 UED 容器
深入理解定位布局:绝对定位与相对定位
深入理解定位布局:绝对定位与相对定位
|
4月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
72 1
|
4月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
51 0
|
6月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
6月前
浮动和定位
浮动和定位
|
前端开发
CSS常用定位方法(绝对定位、相对定位、固定定位)
CSS常用定位方法(绝对定位、相对定位、固定定位)
CSS常用定位方法(绝对定位、相对定位、固定定位)