DIV之上而不是彼此

Question

我試圖讓一個div填充我的網站的整個寬度與灰色。沒關係。然後我想用圖像填充該div，但不是全部寬度。當我嘗試我的代碼時，灰色全寬div首先出現，帶有圖像的div剛好在那個下面。我怎麼才能把那個div放在上面呢？這裏是我的代碼：

HTML

<div id="meerkaas" style="cursor:pointer;" > 
            <div id="kazensubmenu" style="cursor:pointer;"> 
            <div class="col-md-3 col-sm-6 "> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Botermelk</h3> 
                <h4>Tijdens het boteren verandert de room naar boterkorrels en botermelk. Deze worden van mekaar gescheiden en zo bekomt men botermelk.</h4> 
               </div> 
              </a> 
             </div> 
            </div> 

            <div class="col-md-3 col-sm-6 "> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Yoghurt</h3> 
                <h4>wordt gemaakt op basis van gepasteuriseerde melk. We laten de melk verzuren en op een bepaalde temperatuur rusten. 
                </h4> 
               </div> 
              </a> 
             </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Vla</h3> 
                <h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4> 
               </div> 
              </a> 
             </div> 
            </div> 
            <div class="col-md-3 col-sm-6 "> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Botermelk</h3> 
                <h4>Tijdens het boteren verandert de room naar boterkorrels en botermelk. Deze worden van mekaar gescheiden en zo bekomt men botermelk.</h4> 
               </div> 
              </a> 
             </div> 
            </div> 

            <div class="col-md-3 col-sm-6 "> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Yoghurt</h3> 
                <h4>wordt gemaakt op basis van gepasteuriseerde melk. We laten de melk verzuren en op een bepaalde temperatuur rusten. 
                </h4> 
               </div> 
              </a> 
             </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Vla</h3> 
                <h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4> 
               </div> 
              </a> 
             </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
             <div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-9.jpg);"> 
              <a class="image-popup text-center" > 
               <div class="prod-title "> 
                <h3>Vla</h3> 
                <h4>meer gekend in Nederland, van kindsaf voor onze 3 zonen de nummer 1 in melkdessertjes, dit kon niet ontbreken in ons assortiment.</h4> 
               </div> 
              </a> 
             </div> 
            </div> 
            </div> 
            </div> 

CSS

#meerkaas { 
    margin-left: 0px; 
    margin-top: 650px; 
    margin-bottom: 95px; 
    background: #EEEEEE; 
    display: none; 
    width: 100vw; 
    margin-left: calc(-50vw + 50%); 
    border: 2px solid white; 
} 
#kazensubmenu { 
    margin-left: 300px; 
    margin-right: 300px; 
    margin-top: 650px; 
    margin-bottom: 95px; 
    background: gray; 
    display: none; 
    width: auto; 
} 

注：我知道PX是沒有反應正常，這對以後..

Answer 1

首先在使用vw時，您將遇到大問題Internet Explorer的等

這應該修復它：

#meerkaas { 
    background: gray; 
    display: none; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 

#kazensubmenu { 
    background: gray; 
    left: 300px; 
    position: absolute; 
    top: 650px; 
    width: calc(100% - 600px); 
    z-index: 2; 
}