堆棧內存溢出
  簡體   English   中英

css div 背景圖像出現在頂部菜單之前

[英]css div background image coming before top menu

 原文  2018-08-25 11:48:41  9   4    html/ css

問題描述

我的代碼有一些小錯誤，它現在看起來如何，一切都很好，但是當我去移動屏幕竊聽並在我的另一個 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 />

4 個解決方案

解決方案1
 0  2018-08-25 15:40:17

如果您想讓“我的購物籃和個人資料”顯示在前台，您可以使用z-index屬性設置優先級。 看看這個， https://www.w3schools.com/cssref/pr_pos_z-index.asp 。 通過將漢堡圖片的z-index為 -1，漢堡圖片將出現在背景中，並且可以清晰地查看“我的購物籃和個人資料”div。

謝謝

解決方案2
 0  2018-08-27 03:00:11

我仍然使用 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

解決方案3
 0  2018-08-27 03:10:58

我認為你的問題來自z-index: -1 on class .pm_h_menu ul

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

請記住檢查 css 上的每個 z-index，在這種情況下，您需要在標題上設置更高的 z-index 值。

解決方案4
 0  2018-08-27 10:57:11

嗨，我只是編輯了我的 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;
}

到->

list-style-type: none;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
background-color: #333;
letter-spacing: 1px;
-webkit-transition: .3s;
transition: .3s;
z-index: 5;
position: fixed;
float:right;
right:0;
top:0;
margin:0;
padding:0;

和 html

 <div class="pm_h_menu">
            <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>

謝謝大家:)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 父div背景之前的css div圖像 CSS：在div頂部作為背景的中心圖像 使用CSS中的背景圖像在div的頂部添加三角形 背景圖像頂部的 CSS 邊框（相同的 div？） CSS-如何在背景圖片上獲取div？ ::before 選擇器出現在圖像容器的頂部？ div中的CSS背景圖片 保持div背景圖片在最前面 將div放在背景圖片上方 將背景圖片移到頂部[CSS]
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM