z-index的实用小案例分享

最新推荐文章于 2024-06-12 22:40:10 发布

vastSky0

最新推荐文章于 2024-06-12 22:40:10 发布

阅读量101

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/NEXT00/article/details/129085581

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

可以看到，鼠标移到购物车后，触发了下方购物车内容块的显示，但是出现了其下方的搜索按钮叠在前面显示的问题，这个时候就需要我们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;

}