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

<!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等属性,等找到了自己想要的位置,记下此时的数字,回到代码中调节到这个位置即可。

1. 默认定位 <div style="border: 1px solid black; padding: 10px;"> <h2>默认定位</h2> <p>这是一个默认定位元素。</p> </div> 2. 浮动定位 <div style="border: 1px solid black; padding: 10px;"> <h2>浮动定位</h2> <div style="float: left; background-color: lightblue; width: 50%; padding: 10px;"> <p>这是一个浮动到左侧的元素。</p> </div> <div style="float: right; background-color: lightgreen; width: 50%; padding: 10px;"> <p>这是一个浮动到右侧的元素。</p> </div> <div style="clear: both;"></div> </div> 3. 相对定位 <div style="border: 1px solid black; padding: 10px;"> <h2>相对定位</h2> <div style="position: relative; left: 50px; top: 50px; background-color: lightblue; width: 50%; padding: 10px;"> <p>这是一个相对定位元素,向右移动了50px,向下移动了50px。</p> </div> </div> 4. 绝对定位 <div style="border: 1px solid black; padding: 10px; position: relative;"> <h2>绝对定位</h2> <div style="position: absolute; left: 50px; top: 50px; background-color: lightblue; width: 50%; padding: 10px;"> <p>这是一个绝对定位元素,相对于父元素向右移动了50px,向下移动了50px。</p> </div> </div> 5. 固定定位 <div style="border: 1px solid black; padding: 10px;"> <h2>固定定位</h2> <div style="position: fixed; right: 50px; bottom: 50px; background-color: lightblue; width: 50%; padding: 10px;"> <p>这是一个固定定位元素,相对于浏览器窗口向左移动了50px,向上移动了50px。</p> </div> </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值