Javascript Div在Div之上，而不是在彼此之下

我试图得到一个div，填补了我的网站与灰色的整个宽度。没关系。然后我想用图像填充这个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>

---

注意：我知道px没有响应正常，这是为了以后使用。

首先，在Internet Explorer等中使用vw时，您会遇到大问题

这应该可以解决这个问题：

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

---

职位：绝对职位？为什么不设置

主体

的

背景色

，而不是使用

DIV

？这是一个标准的DIV，不显示。只有那个div应该有背景色。Position absolute（绝对位置）不起作用。大众的另一种选择是，在IE11之前，甚至在IE11中，大众和vh都不支持部分支持。我建议您在不确定时参考。如果一个元素是一个div，它将以100%的宽度作为其块元素。所以在allI不需要大众，我试过你的代码，但没有给出结果：你想要多宽？我把答案加宽了。现在应该可以工作了。顺便说一句，我假设这是桌面大小的视口，对吗？像这样，但在彼此的顶部：（这是我的问题代码的结果）

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