CSS div背景图片出现在顶部菜单之前

时间：2018-08-25 11:48:41

标签： html css

我的代码有一些小错误，看起来如何 现在一切正常，但是当我进入手机屏幕调试并来到我的另一个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 />

4 个答案:

答案 0 :(得分：0)

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

谢谢

答案 1 :(得分：0)

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

答案 2 :(得分：0)

我认为您的问题来自{ "name": "truffle-init-webpack", "version": "0.0.2", "description": "Frontend example using truffle v3", "scripts": { "lint": "eslint ./", "build": "webpack", "dev": "webpack-dev-server" }, "author": "Douglas von Kohorn", "license": "MIT", "devDependencies": { "babel-cli": "^6.22.2", "babel-core": "^6.22.1", "babel-eslint": "^6.1.2", "babel-loader": "^6.2.10", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.1.8", "babel-preset-es2015": "^6.22.0", "babel-register": "^6.22.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.26.1", "eslint": "^3.14.0", "eslint-config-standard": "^6.0.0", "eslint-plugin-babel": "^4.0.0", "eslint-plugin-mocha": "^4.8.0", "eslint-plugin-promise": "^3.0.0", "eslint-plugin-standard": "^2.0.0", "fs": "0.0.1-security", "html-webpack-plugin": "^2.28.0", "json-loader": "^0.5.4", "mongodb": "^3.1.4", "style-loader": "^0.13.1", "truffle-contract": "^1.1.11", "webpack": "^2.2.1", "webpack-dev-server": "^2.3.0" }, "dependencies": { "web3": "^0.20.2" } } 类的z-index: -1 

.pm_h_menu ul
  

请记住要检查CSS上的每个z-index，在这种情况下，您需要在标头上设置较高的z-index。

谢谢

答案 3 :(得分：0)

嗨，我只是编辑我的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>

感谢所有人：）

相关问题
最新问题