请检查这个小提琴:http: //jsfiddle.net/5WGLs/
如果将鼠标悬停在 上basker-holder
,您可以看到它的子级->shopping-cart
顶部边框不在其父级之后。它应该是白色的。我正在寻找的效果是这样的:
请检查这个小提琴:http: //jsfiddle.net/5WGLs/
如果将鼠标悬停在 上basker-holder
,您可以看到它的子级->shopping-cart
顶部边框不在其父级之后。它应该是白色的。我正在寻找的效果是这样的:
只需添加position: relative;
,background-color: #fff;
和z-index: 2000;
。这样,将结束并且将隐藏到边框顶部。.cart-btn
.cart-btn
.shopping-cart
background-color
查看示例:http : //jsfiddle.net/5WGLs/3/
希望这有帮助。
玩,z-index
我们background;
可以实现
编辑过的 CSS
.cart-btn {
color: #333;
display: inline-block;
margin-top: 12px;
padding: 5px 22px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 30px;
border: 1px solid #fff;
position: relative;
z-index:10;
background:#fff;
}
.shopping-cart {
position: absolute;
background: #FFF;
left: 0;
text-align: left;
width: 160px;
border: 1px solid #fe4365;
top: 52px;
opacity: 0;
transform: translateY(25px) rotateY(50deg);
z-index:-1;
}
你可以使用z-index
. 演示
但是您应该阅读关于 Z-Index 的内容,因为使用如此大的 z-indices 是没有用的。