absolute 和 z-index妙用

最新推荐文章于 2024-03-18 17:20:19 发布

annuobin1120

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量261

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WhiteHorseIsNotHorse/p/7274176.html

版权

开发中遇到了一个问题

文件单击会触发下载，且文件图标使用了absloute定位 zindex为10
文件hover时候会出现横着的菜单，菜单使用了absolute，并未使用zindex
点击[。。。]会显示下拉菜单，下拉菜单使用了 absolute，并未使用zindex

期望：在下拉菜单上hover 有浅蓝色，且点击触发事件，
实际：在下拉菜单上hover 无颜色，且点击无效，

解决办法：在下拉菜单或者横向菜单上加上zindex 大于10，即可

如果以上没听懂。。。你可以当上面是废话，下面请允许我用俺们村儿大白话再重新说一遍

a b c 三个盒子
a 相对定位，
a里面的b 固定定位zindex 10
c和a平级，固定定位zindex 无
这时候我们现在在c hover时候改变背景色（甚至是点击事件），其实无效的，需要把c的 zindex 设置大于10才行，
这样说应该清楚了吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            border: 1px solid;
            position: relative;
            width: 100px;
            height: 200px;
        }

        .item {
            width: 50px;
            height: 50px;
            border: 1px solid darkgrey;
            position: absolute;
            z-index: 10;
        }
        .ap2 {
            position: absolute;
            z-index:11;
            width: 50px;
            height: 50px;
            border: 1px solid darkgrey;
            background-color: darkblue;
            top:0;
        }
        .ap2:hover {
            background-color: darkmagenta;
        }

    </style>
</head>
<body>

<div id="app">
    <div class="div1 item">a</div>
</div>
<div class="ap2">

</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>


</script>
</html>

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7274176.html

annuobin1120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
absolute 和 z-index妙用

开发中遇到了一个问题文件单击会触发下载，且文件图标使用了absloute定位 zindex为10文件hover时候会出现横着的菜单，菜单使用了absolute，并未使用zindex点击[。。。]会显示下拉菜单，下拉菜单使用了 absolute，并未使用zindex期望：在下拉菜单上hover 有浅蓝色，且点击触发事件，实际：在下拉菜单上hover 无颜色，且点击...
复制链接

扫一扫