一个 css z-index 的题目

🌙
手机阅读
本文目录结构

搜了下东西;

看到有这么一句话;

    当子层和父层都定义了z-index的属性的时候,z-index值以父层的z-index为准,这个是web前端应该谨记的一点,这个在实际切图中经常会碰到这个问题,下次在碰到这种问题就不会搞错了。

    ps:需要使用子层z-index属性的时候,那就要删除子层父层上的z-index属性,如果要用父层z-index属性,那么子层z-index不需要定义,因为定义也是无效的。

但是写的时候发现,好像 z-index 最大的还是显示完;

我是这么写的‘

    <!DOCTYPE html>
    <html>
        <head lang=”en”>
            <meta charset=”UTF-8″>
            <title></title>
            <style>
                body{
                    position: relative;
                }
                .div1{
                    width: 500px;
                    height: 500px;
                    background: darkgreen;
                    z-index: 100;
                }
                .div2{
                    width: 200px;
                    height: 200px;
                    background: red;
                    position: relative;
                    top: 250px;
                    left: 250px;
                    z-index: 500;
                }
                .div3{
                    width: 200px;
                    height: 200px;
                    background: yellow;
                    position: relative;
                    top: -100px;
                    left: 400px;
                    z-index: 300;
                }
            </style>
        </head>
        <body>
            <div class=”div1″>
            <div class=”div2″></div>
            </div>
            <div class=”div3″></div>
        </body>
    </html>

定位无论用 relative 还是 absolute,都是 z-index 的最大;


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>