解决css position: absolute失效问题
1年前
超过515天
温馨提示
本文最后更新于2023年04月23日，已超过515天没有更新，若内容或图片失效，请留言反馈。
最近修改模板的时候出现无法进行定位等情况，再三经过搜索引擎查找后终于解决了。
问题复现
需求：已有一个外层的元素（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
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
