相对定位和绝对定位的练习

最新推荐文章于 2025-06-12 16:39:59 发布

ztt0918

最新推荐文章于 2025-06-12 16:39:59 发布

阅读量955

点赞数

CC 4.0 BY-SA版权

分类专栏：相对定位和绝对定位的练习文章标签：相对定位和绝对定位的练习

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/70821095

相对定位和绝对定位的练习专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #container{
            height: 300px;
            background-color: #ff7300;
          position: relative;
        }
      #content{
          width: 306px;
          height: 142px;
          background-image: url("../img/duo.png");
          position: absolute;
          left: 50%;
          bottom: 0;
          margin-left: -153px;
               }
        #div1 {
            background-image: url("../img/duo1.png");
            position: absolute;
            width: 108px;
            height: 117px;
            top: 25px;
            left: -1px;
            opacity: 0;
        }
      #div2 {
          background-image: url("../img/duo2.png");
          position: absolute;
          width: 117px;
          height: 109px;
          top: -25px;
         left: 45px;
          opacity: 0;
      }
      #div3 {
          background-image: url("../img/duo3.png");
          position: absolute;
          width: 115px;
          height: 108px;
          top: -26px;
          left: 159px;
          opacity: 0;
      }
      #div4 {
          background-image: url("../img/duo4.png");
          position: absolute;
          width: 97px;
          height: 110px;
          top: 31px;
          left:219px;
          opacity:0 ;

      }
        #div4:hover{
            opacity: 1;

        }

      #div3:hover{
          opacity: 1;

      }

      #div2:hover{
          opacity: 1;

      }

      #div1:hover{
          opacity: 1;

      }


    </style>
</head>
<body>
<div id="container">
      <div id="content">
           <div id="div1"></div>
           <div id="div2"></div>
           <div id="div3"></div>
           <div id="div4"></div>
      </div>
</div>
</body>
</html>



当在页面中调整图片距离的时候，可在页面效果中f12查看代码，选择左上角的选择按钮
然后去点击想要调整位置的图片，这样就找到了该图片的属性位置

然后调节top，left等属性，等找到了自己想要的位置，记下此时的数字，回到代码中调节到这个位置即可。