前言

當(dāng)父級元素position設(shè)置為absolute后，默認(rèn)寬度與子元素內(nèi)容的寬度一致。如果想要使用absolute 以后的元素依然和父容器一樣的寬度的話，有兩個方法：

1、直接設(shè)置 width:100%

相關(guān)代碼：

 .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之后，設(shè)置寬度width: 100%</div>
    </div>
    

image.png

但如果元素的父容器為body的時候設(shè)置width為100%會出現(xiàn)橫向滾動條，因為這里的100%是相對屏幕而不是瀏覽器。

image.png

這個時候就需要使用方法二了

2、設(shè)置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、本節(jié)代碼

position