在复习前端三大件的时候,想着继续模仿小米商城官网制作网页,于是遇到了下面这个问题:
可以看到,鼠标移到购物车后,触发了下方购物车内容块的显示,但是出现了其下方的搜索按钮叠在前面显示的问题,这个时候就需要我们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相当于一个关于显示优先级的权重值设置,权重值越大的,在与权重较小的元素发生重叠时,会优先显示在前方。