时间戳

首页 > 解决方案 > css div背景图像出现在顶部菜单之前

html - css div背景图像出现在顶部菜单之前

问题描述

我的代码在这里有一些小错误，它现在看起来一切正常，但是当我去移动屏幕窃听并出现在我的另一个 div 类之前

在桌面上一切都好，我想创建这样的菜单

这是我的错误......

想要这个我的篮子和个人资料 div 出现在这个图像之前....

这是我的代码：

/* 
    |BURGERS DIV
    */

.pm_shop_catagory_burgers {
  width: 250px;
  height: 200px;
  background: url('../images/pm_burgers.png')center;
  position: relative;
  display: inline-block;
  left: 25px;
  border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_burgers .top-left {
  position: absolute;
  top: 8px;
  left: 65px;
}

.pm_shop_catagory_burgers .top-left a {
  text-decoration: none;
  color: #FA5B11;
}

.pm_shop_catagory_burgers .top-left a:hover {
  text-decoration: none;
  color: #7FADCB;
}

.pm_shop_catagory_burgers .top-left a:hover:before {
  border-radius: 325%;
  display: block;
  position: absolute;
  margin-left: -25px;
  content: "\2192";
}


/* 
    |END BURGERS DIV
    */


/* 
    |GRILL DISHES DIV
    */

.pm_shop_catagory_grill_dishes {
  width: 240px;
  height: 200px;
  background: url('../images/pm_grill_dishes.png')center;
  position: relative;
  display: inline-block;
  left: 25px;
  border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_grill_dishes span.top-left {
  position: absolute;
  top: 8px;
  left: 35px;
}

.pm_shop_catagory_grill_dishes .top-left a {
  text-decoration: none;
  color: #FA5B11;
}

.pm_shop_catagory_grill_dishes .top-left a:hover {
  text-decoration: none;
  color: #7FADCB;
}

.pm_shop_catagory_grill_dishes .top-left a:hover:before {
  display: block;
  position: absolute;
  margin-left: -25px;
  content: "\2192";
}


/* 
    |END GRILL DISHES DIV 
    */


/* 
    |FRIED DISHES DIV
    */

.pm_shop_catagory_fried_dishes {
  width: 240px;
  height: 200px;
  background: url('../images/pm_fried_dishes.png')center;
  position: relative;
  display: inline-block;
  left: 25px;
  border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_fried_dishes span.top-left {
  position: absolute;
  top: 8px;
  left: 35px;
}

.pm_shop_catagory_fried_dishes .top-left a {
  text-decoration: none;
  color: #FA5B11;
}

.pm_shop_catagory_fried_dishes .top-left a:hover {
  text-decoration: none;
  color: #7FADCB;
}

.pm_shop_catagory_fried_dishes .top-left a:hover:before {
  display: block;
  position: absolute;
  margin-left: -25px;
  content: "\2192";
}


/* 
    |END FRIED DISHES DIV 
    */
<center>
  <h2 class="column-title"><i class="fas fa-angle-double-right"></i> OUR MENU <i class="fas fa-angle-double-left"></i></h2>
</center>
<hr style="border:2px solid #FA5B11;border-radius: 325%;" />
<div class="pm_shop_catagory_burgers">
  <span class="top-left">
                <h2 class="column-title">
                    <a class="collapsible">Burgers</a> 
                    <div class="content" style="padding: 6px;">
                        <a href="./?p=1_4qpb" style="font-size:10pt;">1/4 Quarter Pounder Burger</a>
                        <hr />
                        <a href="./?p=1_2hpb" style="font-size:10pt;">1/2 Half Pounder Burger</a>
                        <hr />
                        <a href="./?p=1_2hpb" style="font-size:10pt;">Triple Burger</a>
                        <hr style="border:1px dashed #FA5B11;"/>
                        <a href="./?p=1_4chb" style="font-size:10pt;">1/4 Chiken Burger</a>
                        <hr />
                        <a href="./?p=1_2chb" style="font-size:10pt;">1/2 Chiken Burger</a>
                    </div>
                </h2>
            </span>
</div>
<div class="pm_shop_catagory_grill_dishes">
  <span class="top-left"><h2 class="column-title"><a href="#">Grill Dishes</a></h2></span>
</div>
<div class="pm_shop_catagory_fried_dishes">
  <span class="top-left"><h2 class="column-title"><a href="#">Fried Dishes</a></h2></span>
</div>
<br />

标签： htmlcss

解决方案

我仍然使用 z-index: 999; 在我的篮子和个人资料内容上，但仍然存在同样的问题，我尝试添加 z-index: -1; 当我将 z-index 添加到 div 时，对 div 内容（如汉堡、fried_dishes）只有 div 消失了，谢谢 :)

=================================我的项目=============== =================================================== ==/ 索引 /===============================

<div class="pm_h_menu" style="position: fixed;right:0;top:0;">
            <ul>
                <li><a href="./?p=pm_shop"><i class="fas fa-shopping-basket txt_color_pm"></i> <b>My Basket</b></a></li>
                <li><a href="./?p=profile"><i class="fas fa-user txt_color_pm"></i> <b>Profile</b></a></li>
            </ul>
        </div>
        <div class="pm_clear"></div>
<center>
    <h2 class="column-title"><i class="fas fa-angle-double-right"></i> OUR MENU <i class="fas fa-angle-double-left"></i></h2>
</center>
<hr style="border:2px solid #FA5B11;border-radius: 325%;" />
<div class="pm_shop_catagory_burgers">
    <span class="top-left">
        <h2 class="column-title">
            <a class="collapsible">Burgers</a> 
            <div class="content" style="padding: 6px;">
                <a href="./?p=1_4qpb" style="font-size:10pt;">1/4 Quarter Pounder Burger</a>
                <hr />
                <a href="./?p=1_2hpb" style="font-size:10pt;">1/2 Half Pounder Burger</a>
                <hr />
                <a href="./?p=1_2hpb" style="font-size:10pt;">Triple Burger</a>
                <hr style="border:1px dashed #FA5B11;"/>
                <a href="./?p=1_4chb" style="font-size:10pt;">1/4 Chiken Burger</a>
                <hr />
                <a href="./?p=1_2chb" style="font-size:10pt;">1/2 Chiken Burger</a>
            </div>
        </h2>
    </span>
</div>
<div class="pm_shop_catagory_grill_dishes">
    <span class="top-left"><h2 class="column-title"><a href="#">Grill Dishes</a></h2></span>
</div>
<div class="pm_shop_catagory_fried_dishes">
    <span class="top-left"><h2 class="column-title"><a href="#">Fried Dishes</a></h2></span>
</div>
<br />

======================================== CSS ========== ================

/* 
| HEADER MENU | 
*/
.pm_h_menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background-color: #333;
    letter-spacing: 1px;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: -1;
}

.pm_h_menu li {
    float: left;
}

.pm_h_menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom:3px solid #FA5B11;
}

.pm_h_menu li a:hover {
    background-color: #111;
    color:#FA5B11;
    border-bottom:3px solid #5C94B9; 
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* 
| END HEADER MENU | 
*/
/* 
|BURGERS DIV
*/

.pm_shop_catagory_burgers {
    width: 250px;
    height: 200px;
    background:  url('https://ibb.co/i7GcA9')center;
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}


.pm_shop_catagory_burgers .top-left {
    position: absolute;
    top: 8px;
    left: 65px;
}
.pm_shop_catagory_burgers .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_burgers .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_burgers .top-left a:hover:before{
    border-radius:325%;
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";

}
/* 
|END BURGERS DIV
*/


/* 
|GRILL DISHES DIV
*/
.pm_shop_catagory_grill_dishes {
    width: 240px;
    height: 200px;
    background:  url('https://ibb.co/dUieOU')center;  
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_grill_dishes span.top-left {
    position: absolute;
    top: 8px;
    left: 35px;
}
.pm_shop_catagory_grill_dishes .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_grill_dishes .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_grill_dishes .top-left a:hover:before{
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";
}
/* 
|END GRILL DISHES DIV 
*/


/* 
|FRIED DISHES DIV
*/
.pm_shop_catagory_fried_dishes {
    width: 240px;
    height: 200px;
    background:  url('https://ibb.co/hrsHA9')center;  
    position: relative;
    display: inline-block;
    left:25px;
    border-bottom: 1px solid #7FADCB;
}

.pm_shop_catagory_fried_dishes span.top-left {
    position: absolute;
    top: 8px;
    left: 35px;
}
.pm_shop_catagory_fried_dishes .top-left a{
    text-decoration: none;
    color:#FA5B11;
}
.pm_shop_catagory_fried_dishes .top-left a:hover{
    text-decoration: none;
    color:#7FADCB;
}
.pm_shop_catagory_fried_dishes .top-left a:hover:before{
    display: block;
    position: absolute;
    margin-left: -25px;
    content: "\2192";
}
/* 
|END FRIED DISHES

推荐阅读