绝对定位的特殊性质

最新推荐文章于 2020-11-24 18:19:07 发布

ringtoping

最新推荐文章于 2020-11-24 18:19:07 发布

阅读量528

点赞数

本文链接：https://blog.csdn.net/ring_to_ping/article/details/45541837

版权

代码中，外面的盒子没有设置position属性，内部的盒子设置了绝对定位，但是只在垂直方向指定了偏移量，没有指定水平方向的偏移量，此时内部的盒子则因为设置了绝对定位属性，而外层div没有position属性，所以的它的定位基准是浏览器窗口。但是又由于在水平方向上没有设置偏移属性，因此在水平方向它仍然会保持原来应该在的位置，它的左侧与外层盒子的左侧对齐。因为在垂直方向上设置了“top:70px”，所以距离浏览器窗口顶部为70像素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
    margin:0;
}
#outerBox {
    width: 200px;
    height: 100px;
    margin: 10px auto;
    background: silver;
}
#innerBox {
    position: absolute;
    top: 70px;
    width: 100px;
    height: 50px;
    background: orange;
}
</style>
</head>
<body>
    <div id="outerBox">
        <div id="innerBox"></div>
    </div>
</body>
</html>

ringtoping

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绝对定位的特殊性质

代码中，外面的盒子没有设置position属性，内部的盒子设置了绝对定位，但是只在垂直方向指定了偏移量，没有指定水平方向的偏移量，此时内部的盒子则因为设置了绝对定位属性，而外层div没有position属性，所以的它的定位基准是浏览器窗口。但是又由于在水平方向上没有设置偏移属性，因此在水平方向它仍然会保持原来应该在的位置，它的左侧与外层盒子的左侧对齐。因为在垂直方向上设置了“top:70px”，所
复制链接

扫一扫