html div设置层级,【css 层级】设置灰色块的z-index:-1,但并没有有效？

问题：希望实现灰色块在下面

截图：

代码如下：

Title

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

a{

text-decoration: none;

color: #333333;

}

.menu{

width: 400px;

height: 400px;

position: relative;

text-align: center;

background-color: antiquewhite;

z-index: 0;

}

.menu>.fir_menu{

height: 50px;

width: 300px;

border-radius: 25px 0 0 25px;

background-color: orange;

border: 1px solid red;

position: absolute;

right: 0;

top: 300px;

z-index: 1;

}

.menu>.fir_menu>li{

position: relative;

z-index:1;

}

.menu>.fir_menu>li>a{

width: 40px;

height: 40px;

line-height: 40px;

border: 1px solid red;

border-radius: 20px;

background-color: lightcoral;

display: block;

margin-left: 20px;

margin-top: 5px;

}

.menu>.fir_menu>li>.sec_menu{

height: 50px;

width: 180px;

border-radius: 25px;

border: 1px solid grey;

position: absolute;

left: 50px;

top: -80px;

z-index: 1;

}

.menu>.fir_menu>li>.sec_menu::before{

content: '';

width: 150px;

height: 50px;

background-color: grey;

border: 1px solid grey;

border-radius: 25px;

position: absolute;

left: -80px;

top:25px;

transform: rotate(-60deg);

z-index: -10;

}

.menu>.fir_menu>li>.sec_menu>li{

float: left;

position: relative;

z-index:1;

}

.menu>.fir_menu>li>.sec_menu>li>a{

width: 40px;

height: 40px;

line-height: 40px;

border: 1px solid grey;

border-radius: 20px;

background-color: lightgray;

margin: 4px;

display: block;

}

.menu>.fir_menu>li>.sec_menu>li>.thi_menu{

height: 50px;

width: 50px;

border-radius: 25px;

background-color: orange;

position: absolute;

left: 50px;

top: -80px;

z-index: 1;

}

.menu>.fir_menu>li>.sec_menu>li>.thi_menu::before{

content:'';

width: 150px;

height: 50px;

background-color: grey;

border: 1px solid grey;

border-radius: 25px;

position: absolute;

left: 0px;

top:28px;

transform: rotate(30deg);

z-index: -1;

}

.menu>.fir_menu>li>.sec_menu>li>.thi_menu>li>a{

height: 40px;

width: 40px;

border-radius: 20px;

background-color: lightcoral;

line-height: 40px;

display: block;

margin: 5px;

}

• 点

  • 1

    • 我
  • 2
  • 3