絕對100％寬度div溢出一側

Question

的HTML

<header>
    <div class="container">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</header>

的CSS

header .parent{ 
           text-align:left;
           position: absolute;
           z-index: 2;
           margin-top: 15%;
        }
header .parent .child{
              /*Nothing here yet*/           
        }

我希望.parent像這樣 當我設置.parent width:100% ，我有這個

.parent是正確的，但其他溢出
我不想在.container上使用position: relative ，因為.parent將被標頭之外的其他div覆蓋，即使我嘗試使用z-index
這里有什么問題 ？ 有誰能夠幫助我 ？

Answer 1

您需要為絕對定位的元素設置兩個或多個偏移量（ top ， left ， right ， bottom ）。

在下面的示例中，我創建了一個header ，其header邊框的高度為100px，其中包含.container ，其高度為一半，邊距為20px。

例如，如果您希望.parent左右邊緣與.parent的邊緣.container ，則將左右偏移設置為20px。

您可以通過為top分配一個值來控制垂直放置。

如果不指定偏移值，則它們默認為與元素在常規內容流中的位置相對應的值。

在您的原始示例中， .parent的左側邊緣將與.parent的左側邊緣相對.container ，因為.container的左側邊緣.parent的左側邊緣.container ，然后如果您設置width: 100% ，這將迫使右邊緣對應於默認左邊緣右側的窗口寬度的100％，這將導致溢出。

為了完全理解這里發生的事情，您需要閱讀有關絕對定位的CSS規范，即：

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

尤其是靜態位置包含塊的概念。

 body { margin: 0;} header .parent { border: 1px dashed red; position: absolute; height: 50%; top: 120px; left: 20px; right: 20px; } header { border: 1px solid black; height: 100px; } .container { border: 1px dotted blue; height: 50%; margin: 20px;} 

 <header> <div class="container"> <div class="parent"> <div class="child"></div> </div> </div> </header> 

Answer 2

.container類需要具有以下位置：相對。 由於尚未將相對容器設置為絕對div，因此正在考慮主體寬度

.container {
    position: relative;
}