用Z-index解决不了弹出框的问题啊?

Question

*{

margin: 0;

padding: 0;

}

.box1{

position: relative;left: 0;top: 0;

z-index:10;

}

.hide{

width:50px;

height: 30px;

border: 1px solid black;

text-align: center;

line-height: 30px;

position: absolute;left: 10px;top: 0px;

z-index: 99;

}

.box{

width: 500px;

height: 300px;

border: 1px solid blue;

position: absolute;left: 10px;top:30px;

z-index:-10000;

display: none;

}

.box1:hover .hide{

border-bottom:none;

}

.box1:hover .box{

display: block;

}

.bbb{

position: relative;

}

html

<div class="box1">

<div class="hide">弹出</div>

<div class="box">弹出框</div>

</div>

Answer 1

因为你没有设置背景颜色，默认是透明的。设置background:#fff;