绝对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; 
}