绝对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的左侧是正确的，但另一侧溢出了 我不想在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的左边缘开始1}}，然后如果设置width: 100%，则会强制右边缘对应默认左边缘的窗口宽度的100％到右边，这会导致溢出。

要完全理解这里发生的事情，您需要阅读关于绝对定位的CSS规范，即：

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

尤其是包含静态位置的块的概念。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

.container类需要有位置：相对。由于您尚未将相对容器设置为绝对div，因此它正在考虑体宽

.container {
    position: relative;
}