html - 上の div が展開されたときに div を押し下げますか?

Question

1 ページの Web サイトを作成します。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 #container の画像が重なって表示されることです。私の連絡先ページの私のイメージ。拡大すると、連絡先ページが押し下げられるようにしたいと思います。これを position:relative で実行しようとしましたが、うまくいかないようです。

関連する 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;
}