html

最新推荐文章于 2024-07-18 20:18:47 发布

&.杨.

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量54

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_52335826/article/details/115738774

版权

<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   .box1{
    /*大相小绝/子绝父相:父盒子相对定位/子盒子绝对定位*/
    width: 1000px;
    height: 1800px;
    border: solid 5px red;
   }
   .box1 div{
    width: 200px;
    height: 200px;
   }
   .box2{
    /*position:定位 相对定位  绝对定位  固定定位*/
    position: relative;   /*相当定位*/
    /*偏移量*/
    left:100px;   /*往左偏移100px*/
    top:170px;
    background-color: pink;
    z-index: 1;  /*正数/负数/0:值越大.显示越靠前*/
   }
   .box3{
    /*absolute绝对定位：根据上一个有定位的盒子偏移位置，如果说往上都没有定位的盒子，就根据body来偏移，*/
    /*绝对定位的盒子会脱标*/
    position: absolute;
    /*偏移量*/
    top:100px;
    right: 200px;o accelerator: false;
    background-color: deeppink;
   }
   .box4{
    /*fixed:固定定位,根据body*/
    position: fixed;
    right:0px;
    top:200px;
    background-color: skyblue;
   }
   .box5{
    position: fixed;
    top:10px;
    width: 500px;
    height: 50px;
    background-color: royalblue;
   }
  </style>
 </head>
 <body>
  <div class="box5"></div>
  <div class="box1">
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div>
  </div>
 </body>
</html>

&.杨.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html

<html> <head> <meta charset="utf-8" /> <title></title> <style> .box1{ /*大相小绝/子绝父相:父盒子相对定位/子盒子绝对定位*/ width: 1000px; height: 1800px; border: solid 5px red; } .box1 div{ width: 200px;
复制链接

扫一扫