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

Question

我的代码有一些小错误，它看起来如何 现在一切都很好，但是当我进入移动屏幕窃听并在我的另一个 div 类之前出现时

On descktop everything alright i want to create menu like this

Here is my bug .....

希望我的购物篮和个人资料 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 />

Answer 1

如果你想让“我的购物篮和个人资料”显示在前台，你可以使用z-index属性来设置优先级。检查一下，https://www.w3schools.com/cssref/pr_pos_z-index.asp .通过将汉堡图片的z-index设置为-1，汉堡图片将出现在背景中，并且可以清楚地查看“我的购物车和个人资料”div。

谢谢