显示块不起作用

Question

我有一个类似的布局：

 <div id="content">
        <div class="container">
           <div id="container-overlay"></div>
           <img>
        </div>

        <div class="container">
            <div id="container-overlay"></div>
            <img>
        </div>
    </div>

我希望我的所有图像宽度相同，并且在一列中，所以我使用了显示块：

#content{
   position: relative;
}

.container{
   display: block;
}

.container-overlay{
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: absolute;
  }

img{
   width: 600px;
}

然而，图像并排显示而不是单列，我不知道为什么!!

您可以在此处查看真正的问题：http://layouttotest.tumblr.com/

Answer 1

你只需删除.container上的绝对位置，就像在这个小提琴http://jsfiddle.net/w89qytrs/中看到的那样。 position: absolute对齐下一个父元素左上角的元素position: relative。