解决css position: absolute失效问题
1年前
超过580天
温馨提示
本文最后更新于2023年04月23日，已超过580天没有更新，若内容或图片失效，请留言反馈。
最近修改模板的时候出现无法进行定位等情况，再三经过搜索引擎查找后终于解决了。
问题复现
需求：已有一个外层的元素（class为"container"），这个外层元素已经设置了margin，现在有一个元素（class为"test"），放在这个外层元素里边，想要基于这个外层元素的margin进行绝对定位。
css代码
.container {
margin-right: 100px;
}
.test {
position: absolute;
right: 10px;
}
HTML代码
<div class="container"><div class="test">测试</div></div>
结果
我们想要的结果：class为“test”的内部元素距离浏览器右侧110px，现在的结果：class为“test”的内部元素距离最右侧只有10px。
原因分析
默认情况下，所有的元素的position都是static类型，而absolute这个是相对于 static 定位以外的第一个父元素进行定位的。
以上边的“问题复现”的为例：class为“container”的元素没有设置position，所以它position就是默认的static，这就导致内部的class位“test”的元素在找父元素的时候经历了如下步骤：
找它最近的父元素“class为“container”的元素”，发现position是默认的static，不满足条件，继续向上级找，找到body元素，发现body的position也是默认的static，不满足条件，继续向上级找，找到html元素，这已经是最外边的元素了，只能基于此进行定位了。
解决方案
设置一下直接父元素的postion为非static的值（一般设置为relative即可）。
css代码
.container {
margin-right: 100px;
position: relative;
}
.test {
position: absolute;
right: 10px;
}
文章来源于：https://blog.csdn.net/feiying0canglang/article/details/121645939
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
