小技巧：absolute 元素的宽度问题

最新推荐文章于 2022-08-16 18:06:03 发布

ISaiSai

最新推荐文章于 2022-08-16 18:06:03 发布

阅读量2w

点赞数 7

本文链接：https://blog.csdn.net/ISaiSai/article/details/45640515

版权

当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽

如果希望absolute 以后的元素依然和父容器一样是的100% 宽度

有两个方法：

1.直接设置 width:100%

2.设置left:0px right:0px;

demo如下：

<div style="width:1190px; height: 300px; background-color: gray;position: relative;">
    <div style="position: absolute;top: 50px;left: 0px;right: 0px; background-color: yellow;">hehehehe</div>
    <div style="position: absolute;top: 150px;left: 0px;width:100%; background-color: yellow;">hehehehe</div>
    <div style="position: absolute;top: 200px;left: 0px;background-color: yellow;">hehehehe</div>
</div>