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