絕對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是這樣 當我設置.parentwidth:100%，我有這個

的左側是正確的，但其他的溢出
我不想上使用position: relative.container因爲.parent將由其他的div外頭覆蓋，即使我試圖用z-index
有什麼問題嗎？有誰能夠幫助我 ？

Answer 1

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

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

例如，如果要使.parent的左右邊緣與.container的邊緣重合，請將左右偏移設置爲20px。

您可以通過將值分配給top來控制垂直位置。

如果您未指定偏移值，則它們會默認爲與常規內容流中的元素位置對應的值。

在你原來的例子中，.parent左邊緣往往對應於.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; 
}