问题：最近在写样式时，遇到一个这样的问题，子元素的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. c#字符串to/from文本文档IO示例

    写入文本文档 class Program { static void Main(String[] args) { //写入string数组,每个string一行 string[] lines = { ...

  2. C#拷贝一个库的表到另外一个库中(的四种方式)

    1.该方法 基本不能用于实际开发中 ,仅供学习参考 public string Copy() { //要复制的表名 string table = "AAAAA"; //构造连接字符 ...

  3. 消息队列（Message Queue）简介及其使用

    消息队列(Message Queue)简介及其使用 摘要:利用 MSMQ(Microsoft Message Queue),应用程序开发人员可以通过发送和接收消息方便地与应用程序进行快速可靠的通信.消 ...

  4. 数据分析与科学计算可视化-----用于科学计算的numpy库与可视化工具matplotlib

    一.numpy库与matplotlib库的基本介绍 1.安装 (1)通过pip安装: >> pip install matplotlib 安装完成 安装matplotlib的方式和nump ...

  5. 加载配置文件-properties

    Properties jdbcProp = new Properties(); jdbcProp.load(getClass().getResourceAsStream("/jdbc.pro ...

  6. selenium与chrome浏览器及驱动的版本匹配

    用selenium+python+webdriver完成UI功能自动化,经常会碰到浏览器版本与驱动的版本不匹配而引起报错,下面就selenium与chrome浏览器及驱动的版本匹配 做个总结. 使用W ...

  7. idea的maven搭建

    IntelliJ IDEA中创建Web聚合项目(Maven多模块项目) 在file-setting-maven中可以配置自己下载的maven,在自己下载maven目录的config下的setting. ...

  8. JAVA的第二次作业

    1.编写“人”类及其测试类.1.1 “人”类: 类名:Person 属性:姓名.性别.年龄.身份证号码 方法:在控制台输出各个信息1.2 测试类 类名:TestPerson 方法:main ...

  9. DataGridView操作小记（1）

    1.获取总列数 int Column_num = DataGridView1.ColumnCount; 2.获取总行数 int Column_num = DataGridView1.RowCount; ...

  10. vue-router传递参数的几种方式

    参考资料:vue.js官网  博客 vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link>编程式导航传递参数有两种类型:字符串 ...