CSS父元素和子元素都是position:relative定位方式，子元素的位置解析

最新推荐文章于 2024-05-14 10:21:36 发布

Poulyield

最新推荐文章于 2024-05-14 10:21:36 发布

阅读量2.7k

点赞数 2

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/ksws0319440/article/details/113103139

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文通过示例对比了在CSS中，当父元素设置为position:relative时，子元素有无使用position:relative的区别。展示了如何通过position:relative实现子元素相对于自身位置进行偏移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将父元素设置为position:relative，以子元素有无position:relative作为比较。

以下是将父元素设置为position:relative，以子元素有无position:relative的例子：

代码：

<div style="position: relative;width: 100px;height: 100px;border: 1px solid red;">
    <span>7777777</span>
    <div style="width: 100px;height: 100px;border: 1px solid #2D93CA;">
        <span>3333333</span>
    </div>
</div>

效果图：

效果图1

以下是将父元素设置为position:relative，以子元素有position:relative的例子：

代码：

<div style="position: relative;width: 100px;height: 100px;border: 1px solid red;">
    <span>7777777</span>
    <div style="position: relative;top: 10px;left: 10px;width: 100px;height: 100px;border: 1px solid #2D93CA;">
        <span>3333333</span>
    </div>
</div>

效果图：

效果图2