divの代わりに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が応答OKではない、それは後で知っている...の

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