满口金牙 2021-12-05 08:22 采纳率: 91.1%
浏览 72
已结题

css z-index 同级元素改变 层级关系无效

lang='less'

.div1,.div2,.div3{
  position: absolute;
}
.div1 {
  z-index: 900
}
.div2{
  z-index: 889;
}
.div3 {
  z-index: 887;
}

.div2:hover{
  z-index: 902;   //div2在顶层,(有效)
}
.div3:hover{
  z-index: 902;   //div3在顶层(有效)
}
// 下面这句无效
.div3:hover+.div2{
  z-index: 901;  // 同时div2在次顶层(无效)
}
// 这样也不行
.div3:hover .div2{
  z-index: 901;  // div2在次顶层
}
  • 写回答

2条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-06 01:46
    关注

    你看一下,用.div3.div2 或者 .div3+.div2都行,关键是在html部分,要把div2放div3下面!
    第一种:+ 相邻兄弟选择器(.div3
    .div2)只能选择与自己紧紧相连的身后的一个兄弟
    第二种:~ 通用兄弟选择器(.div3~ .div2 )只可以选择在自己身后的所有类名是.div2小弟
    关键就在于只能改变自身元素后面的元素样式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div {
                    width: 100px;
                    height: 100px;
                }
    
                .div1,
                .div2,
                .div3 {
                    position: absolute;
                }
    
                .div1 {
                    left: 0;
                    top: 0;
                    background: red;
                    z-index: 900;
                }
    
                .div2 {
                    background: blue;
                    z-index: 889;
                    left: 10px;
                    top: 10px;
                }
    
                .div3 {
                    background: #CCCCCC;
                    z-index: 887;
                    left: 20px;
                    top: 20px;
                }
    
                .div2:hover {
                    z-index: 902;
                }
                .div3:hover{
                    z-index: 903;
                }
                /* .div3:hover~.div2 {
                    z-index: 902;
                } */
                .div3:hover+.div2 {
                    z-index: 902;
                }
            </style>
        </head>
        <body>
            <div class="div1"></div>
            <div class="div3"></div>
            <div class="div2"></div>
        </body>
    </html>
    
    
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 12月14日
  • 已采纳回答 12月7日
  • 创建了问题 12月5日

悬赏问题

  • ¥15 为什么投影机用酷喵播放电影放一段时间就播放不下去了?提示发生未知故障,有什么解决办法吗?
  • ¥15 来个会搭建付费网站的有偿
  • ¥100 有能够实现人机模式的c/c++代码,有图片背景等,能够直接进行游戏
  • ¥20 校园网认证openwrt插件
  • ¥15 以AT89C51单片机芯片为核心来制作一个简易计算器,外部由4*4矩阵键盘和一个LCD1602字符型液晶显示屏构成,内部由一块AT89C51单片机构成,通过软件编程可实现简单加减乘除。
  • ¥15 求GCMS辅导数据分析
  • ¥30 SD中的一段Unet下采样代码其中的resnet是谁跟谁进行残差连接
  • ¥15 Unet采样阶段的res_samples问题
  • ¥15 R语言regionNames()和demomap()无法选中中文地区的问题
  • ¥15 Open GL ES 的使用
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部