相对定位的学习

最新推荐文章于 2024-08-05 20:06:18 发布

晨曦丿

最新推荐文章于 2024-08-05 20:06:18 发布

阅读量1.3k

点赞数 43

文章标签：学习前端 css

本文链接：https://blog.csdn.net/m0_67677309/article/details/136577761

版权

相对定位 position:relative

相对于原来的位置，进行指定的偏移，相对定位的话，它在仍然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位-->
<!--    相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }

        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
      #father{
            border: 1px solid #5832de;
          padding: 0;
      }
      #first{
          background-color: #5fce5b;
          border: 1px dashed #228d86;
          positon:relative;/*相对定位：上下左右*/
          top:-20px;
          left:-20px
      }
        #second{
            background-color: #31bdc2;
            border: 1px dashed #31bdc0;

        }
        #third{
            background-color: #ad3149;
            border: 1px dashed #ad3148;
            position: relative;
            bottom: 20px;
            right: 20px;
        }




    </style>


</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color:#ff24cf;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
          a:hover{
              background: #0093E9;
          }
          .a2{
              position: relative;
              left: 200px;
              top:-100px;

          }
          .a4 {
              position: relative;
              left: 200px;
              top: -100px;
          }
        .a5{
            position: relative;
            left: 100px;
            top:-300px;
        }

    </style>
</head>
<body>
<div  id="box">
<a class="a1"   href="#">链接1</a>
<a class="a2"   href="#">链接2</a>
<a class="a3"   href="#">链接3</a>
<a class="a4"   href="#">链接4</a>
<a class="a5"   href="#">链接5</a>
</div>
</body>
</html>

-----------------------------------------------------------

绝对定位

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }div:nth-of-type(1){
      /*绝对定位：相对于浏览器*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
           right: 0;
      bottom: 0;
         }
     div:nth-of-type(2){
       /* fixed固定定位*/
       width:50px;
       height: 50px;
       background: yellow;
       position: fixed;
       right: 0;
       bottom: 0;

     }


  </style>


</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

-------------------------------------------------------------

图层

z-index：默认是0，最高~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <ul id="content">
     <li>
       <img src="image/2.jpg" alt="">
     </li>
     <li class="tipText">学习微服务,找狂神</li>
     <li class="tipBg"></li>
     <li> 时间:2099-01-01</li>
     <li>地点:月球一号</li>
     
     
     
   </ul>
</body>
</html>---

#content{
    width:380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000  solid;

}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}/**父级元素相对定位*/
#content ul{
    position:relative ;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;

    top: 364px;
}

.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: black;
    opacity: 0.5;/*背景透明度*/

}

---------------------------------------------------------

动画：菜鸟教程

canvas动画

地图 | 卡巴斯基网络威胁实时地图 (kaspersky.com)

晨曦丿

关注

43
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
相对定位的学习

链接1</a><a class="a2" href="#">链接2</a><a class="a3" href="#">链接3</a><a class="a4" href="#">链接4</a><a class="a5" href="#">链接5
复制链接

扫一扫