高于div扩展时按下div？

Question

制作单页网站。 HTML如下

<!-- Landing Page-->
    <div id="landing">
        <img src="front.png" alt="Cover Page">
    </div>
    <!-- About -->
    <div id="page1">
      <a id="about"></a>
        <img src="Who.png" alt="About Me">
        <p>
            xxx
        </p>
    </div>

    <!-- Work -->
    <div id="page2">
      <a id="portfolio"></a>
        <div id="container">
            <a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
    </div>

    <!-- Contact -->
    <div id="page3">
      <a id="contact"></a>
        <img src="Contact.png" alt="Contact Information">
        <p>
            xxx
        </p>
    </div>
</body>

我从div #container中删除了图像链接，但总共有10个以上。我的问题是当我缩小窗口时（看看它将如何在移动设备上查看），div中的图像＃容器与我的联系页面上的图像重叠。我希望它在扩展时会推动联系页面。我尝试过这个位置：相对，但似乎不起作用。

相关CSS：

#container
{
padding:50px;
display:table-cell;
vertical-align:center;
width:auto;
}

#container a img
{
padding:10px;
opacity:1.0;
filter:alpha (opacity=100); /*for >IE8 */
}

#page1 img 
{
display:block;
margin-left:auto;
margin-right:auto;
width:400px;    
position:relative;
top:15px;
}

#page2 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:purple;
}

#page3 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:red;
}

#page3 img
{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:-20px;
width:400px;
position:relative;
top:15px;
}