子元素z-index高于父元素兄弟元素z-index被遮挡问题

最新推荐文章于 2024-05-09 17:24:34 发布

weixin_30832405

最新推荐文章于 2024-05-09 17:24:34 发布

阅读量3.4k

点赞数

原文链接：http://www.cnblogs.com/xsnow/p/10308606.html

版权

问题：最近在写样式时，遇到一个这样的问题，子元素的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>

转载于:https://www.cnblogs.com/xsnow/p/10308606.html

weixin_30832405

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
子元素z-index高于父元素兄弟元素z-index被遮挡问题

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

扫一扫