实现定位的层级关系 经典盒子单边阴影去除问题

当我们在遇到给一个去除外阴影的话，首先是没有办法去除单边的阴影的

这种问题非常常见

首先我们先看效果图：

 这是小米官网的实现效果图，我们可以看出当我们鼠标悬停在上面购物车盒子上的，会有下拉效果的

首先下拉的盒子是定位订上去的，给下面的下拉盒子加阴影的话，他的四周都会有阴影，且下面盒子的使用定位，posation:absolute;  他的层级会变高，上面的阴影部分会将购物车盒子给盖住，实现不了上图的效果。

那我们该怎么办呢？

非常简单  

我们可以给购物车盒子加一个相对定位，并且设置z-index,将其的层级设置到比下面盒子高，并且在鼠标悬停的时候将上面的盒子的高度变大，这样上面多出来的盒子高度会将下拉框的上面阴影部分给盖住，这样就实现了上面效果了

具体代码

购物车盒子代码

.top_right .top_shopping {
	/* background-color: blue; */
	/* padding: 0px 10px; */
	height: 40px;
	margin-left: 0;
	width: 120px;
	text-align: center;
	display: inline-block;
	background-color: rgba(0,0,0,.1);
	position: relative;
	z-index: 1000;


}

鼠标悬停的时候购物车的代码

.top_right .top_shopping:hover{
	height: 42px;
}

这样增加了两个像素，会将他给盖住，实现上图效果