前言
當(dāng)父級元素position設(shè)置為absolute后杏节,默認寬度與子元素內(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>
但如果元素的父容器為body的時候設(shè)置width為100%會出現(xiàn)橫向滾動條载萌,因為這里的100%是相對屏幕而不是瀏覽器。
這個時候就需要使用方法二了
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;
}
效果圖: