子元素absolute定位时父元素有无relative的区别

最新推荐文章于 2022-07-23 20:51:35 发布

原创最新推荐文章于 2022-07-23 20:51:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了在CSS中使用绝对定位时，子元素相对于不同状态的父元素的位置调整方法。特别是当父元素设置了`position: relative`时，子元素如何正确地进行定位。

Html

<div id="father">
    <div class="son"></div>
</div>

2.Css–父元素没有relative

.son{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top: 10px;
            left: 10px;
        }

这里写图片描述
3.Css–父元素有relative

.father{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:0 auto;
            /*position: relative;*/
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top: 10px;
            left: 10px;
        }