绝对定位元素的百分比margin

最新推荐文章于 2024-06-01 09:36:59 发布

lyuharvey

最新推荐文章于 2024-06-01 09:36:59 发布

阅读量381

点赞数

原文链接：http://www.cnblogs.com/yatao/p/5844953.html

版权

绝对定位元素的百分比margin是相对于第一个定位元素祖先元素（relative/absolute/fixed）的宽度（width）计算的

橙色的宽度（width）为1000px，

蓝色的宽度（width）为600px，

img的margin为10%，

margin-left等于1000*10%，

margin-top等于1000*10%。

这时图片的margin值只与第一个定位元素的宽度有关.

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            #bigbox{
                  width: 1000px;
                  height: 200px;
                  background: lightcoral;
                  position: absolute;
            }
            #box{
                  width: 600px;
                  height: 200px;
                  background: deepskyblue;

            }
            img{
            margin:10%;
            position: absolute;
            }
            </style>
      </head>
      <body>
            <div id="bigbox">
                              <div id="box">
                  <img src="img/logo.jpg"/>
            </div>
            </div>

      </body>
</html>

转载于:https://www.cnblogs.com/yatao/p/5844953.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lyuharvey

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位元素的百分比margin

绝对定位元素的百分比margin是相对于第一个定位元素祖先元素（relative/absolute/fixed）的宽度（width）计算的橙色的宽度（width）为1000px，蓝色的宽度（width）为600px，img的margin为10%，margin-left等于1000*10%，margin-top等于1000*10%。这时图片的margin值只与第一个定位元素的...
复制链接

扫一扫