position:absolute元素的宽度问题

前言

当父级元素position设置为absolute后，默认宽度与子元素内容的宽度一致。如果想要使用absolute 以后的元素依然和父容器一样的宽度的话，有两个方法：

1、直接设置 width:100%

相关代码：

 .absolute {
        border: 1px solid red;
        position: absolute;
    }
    .absolute-main{
        position: relative;
    }
    .absolute2{
        border: 1px solid red;
        position: absolute;
        width: 100%;
        top: 50px;
    }

效果图：

 <div class="absolute">使用position：absolute之后 </div>
    <div class="absolute-main">
        <div class="absolute2">使用position：absolute之后，设置宽度width: 100%</div>
    </div>
    

image.png

但如果元素的父容器为body的时候设置width为100%会出现横向滚动条，因为这里的100%是相对屏幕而不是浏览器。

image.png

这个时候就需要使用方法二了

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

代码：

 .absolute {
        border: 1px solid red;
        position: absolute;
    }

    .absolute2{
        border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
    }

效果图：

image.png

3、本节代码

position