z-index的实用小案例分享

在复习前端三大件的时候，想着继续模仿小米商城官网制作网页，于是遇到了下面这个问题：

可以看到，鼠标移到购物车后，触发了下方购物车内容块的显示，但是出现了其下方的搜索按钮叠在前面显示的问题，这个时候就需要我们css中的z-index属性登场了：

/* 购物车内容模块 */
#top2>div {
    
    
    z-index:30;
}
/* 提交按钮 */
#submit {
    
    
    z-index:29;
    margin-top: 25px;
    position: absolute;
    height: 48px;
    width: 48px;
    background: url(../Pictures/放大镜.png) no-repeat;
    background-position: center;
    background-size: 20px;
    border: #e0e0e0 solid 1px;

}

问题成功解决！

原理解释：
个人理解，z-index相当于一个关于显示优先级的权重值设置，权重值越大的，在与权重较小的元素发生重叠时，会优先显示在前方。