问题：最近在写样式时，遇到一个这样的问题，子元素的z-index值大于父元素兄弟元素z-index值，结果子元素超出父元素部分被父元素兄弟元素遮挡
解决：将父元素的z-index值设置为大于兄弟元素z-index值即可
代码如下：
<style>

      .wrapper:first-of-type .outer:first-of-type {

          z-index: 12;

      }

      .outer {

          position: relative;

          width: 300px;

          height: 200px;

          border: 1px solid #999;

          background: #f00;

          z-index: 10;

      }

      .inside {

          position: absolute;

          left: 0;

          top: 0;

          width: 300px;

          height: 300px;

          background: #0f0;

          z-index: 20;

      }

</style>

<body>

    <div class="wrapper">

        <div class="outer">

            <div class="inside">内部元素</div>

        </div>

        <div class="outer"></div>

    </div>

    <div class="wrapper">

        <div class="outer">

            <div class="inside">内部元素</div>

        </div>

        <div class="outer"></div>

    </div>

</body>

子元素z-index高于父元素兄弟元素z-index被遮挡问题的更多相关文章

  1. line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  2. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  3. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  4. jQuery 获取父窗口的元素 父窗口 子窗口(iframe)

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  5. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  6. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  7. UI自动化通过文字、父子元素，兄弟元素定位

    在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...

  8. 解析jquery获取父窗口的元素

    ("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx ...

  9. jquery获取父窗口的元素[转]

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  10. jQuery----获取兄弟元素的方法

    ① $(this).next():        获取的是当前元素的下一个兄弟元素 ②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素 ③$(this).pre ...

随机推荐

  1. vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188.59:443

    初始化vue项目 vue init webpack vue-demo 之后 一直报vue-cli · Failed to download repo vuejs-templates/webpack: ...

  2. Jmeter发送邮件功能SMTP Sampler

    介绍Jmeter的发送邮件功能,使用的Sampler是SMTP Sampler,详细说明每个配置项的功能 从上往下介绍需要用到的配置项: Server settings Server: 服务器地址 P ...

  3. intellij idea 导入mysql

    我们先创建一个新的工程 下载包 下载完后测试一下连接 可以看到连接成功! 通过可视化工具查看本地的mysql的1234数据里面的数据

  4. LINUX 安装扩展(笔记)

    1.下载扩展包: 网址:http://pecl.php.net/ 2.解压安装包. 3.进入解压好的安装包. 4.使用php中的phpize (扩展模块) 使其生成configure. 5../con ...

  5. C#压缩文件,C#压缩文件夹,C#获取文件

    using System; using System.Data; using System.Configuration; using System.Collections.Generic; using ...

  6. [Unity优化]批处理03：静态批处理

    原理: 运行时,把需要进行静态批处理的网格合并到一个新的网格中.虽然只进行一次合并操作,但是会占用更多的内存来存储合并后的网格,并且被静态批处理的物体无法移动旋转缩放 要使用静态批处理,需要把Stat ...

  7. (14/24) css进阶：（入门）去除冗余的css

    在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...

  8. Kafka(3)--kafka消息的存储及Partition副本原理

    消息的存储原理: 消息的文件存储机制: 前面我们知道了一个 topic 的多个 partition 在物理磁盘上的保存路径,那么我们再来分析日志的存储方式.通过 [root@localhost ~]# ...

  9. mac tomcat安装

    https://blog.csdn.net/qq_35106903/article/details/78860121

  10. FI-盘盈盘亏借贷科目

    资产的盘盈盘亏一般分两步:第一步,批准前调整为账实相符:第二步,批准后结转处理.库存现金.存货.固定资产.工程物资的盘盈盘亏的账务处理见下图: 以上科目中可能并不完整,比如“原材料等科目”就可能包括“ ...