• absolute 和 z-index妙用


    开发中遇到了一个问题

    • 文件单击会触发下载,且 文件图标使用了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;
                 100px;
                height: 200px;
            }
    
            .item {
                 50px;
                height: 50px;
                border: 1px solid darkgrey;
                position: absolute;
                z-index: 10;
            }
            .ap2 {
                position: absolute;
                z-index:11;
                 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>
    
  • 相关阅读:
    [leetcode-102-Binary Tree Level Order Traversal]
    c# 常规验证基类
    不错的silverlight教程
    js 遮罩层请稍后
    登陆冻结账户思路
    mvc json 日期问题的最简单解决方法
    EF 常见语句以及sql语句简单 后续继续添加
    Entity Framework edmx(mapping文件)
    asp.net服务器推送长连接
    数据字典根据组别再分类
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7274176.html
Copyright © 2020-2023  润新知