在div之上而不是在彼此之下

时间:2017-04-04 14:16:28

标签: javascript jquery html css

我试图让一个用灰色填充我网站整个宽度的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没有响应,那是为了以后......

1 个答案:

答案 0 :(得分:1)

首先,在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;
}