ie7 z-index失效的解决的办法

置顶夜幕已降临

于 2021-01-13 10:16:30 发布

阅读量164

点赞数

分类专栏： z-index 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42068855/article/details/112554452

版权

z-index 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在ie浏览器文档模式为7进行测试效果哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
        }
        .aaa{
            font-size:14px;
            position: absolute;
            left:0;
            top:0;
        }
        .ccc{
            position: absolute;
            left:0;
            top:10px;
            border:1px solid red;
            display: none;
            width:100px;
            height:50px;
            background-color: #fff;
            z-index: 999;
        }
        .aaa:hover + .ccc{
            display: block;
        }
        .bbb{
            position: absolute;
            left:0;
            top:20px;
        }
    </style>
</head>
<body>
<div style="position: relative;z-index:2">
    <span class="aaa">鼠标滑到我身上看效果</span>
    <div class="ccc">上方内容</div>
</div>
<div style="position: relative;z-index: 1">
    <div class="bbb">下方内容</div>
</div>
</body>
</html>

需要在父元素加z-index，底部的父元素z-index小，位于上边的父元素z-index大点

夜幕已降临

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie7 z-index失效的解决的办法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position: relative; } .aaa{ font-size:14px;
复制链接

扫一扫

专栏目录