z-index在 H5不生效

分类：uni-app

<view class="test-z">  
    父元素  
    <view class="bg-son">子元素</view>  
</view>

.test-z {  
    // 这里虽然设置了releative 但是并没有产生 【层叠上下文】  
    position: relative;  
    width: 200rpx;  
    height: 100rpx;  
    background: red;  

    .bg-son {  
        position: absolute;  
        width: 200rpx;  
        height: 50rpx;  
        right: -24rpx;  
        top: -24rpx;  
        background: pink;  
        z-index: -1;  
    }  
}

有问题的效果

期望效果，子元素漏出来的部分在父元素外部能展示，子元素和父元素重叠的地方，就被父元素遮挡住

我不知道是不是编译为 h5后，由于是自定义元素uni-view ，所以不遵循 css 层叠样式表规则

2023-01-04 21:23 负责人:无分享

4 个回复

1***@qq.com (作者) - 测试

css中对层叠样式的说明

我按照上面说明，在本地创建一个 1.html 去写通用的css样式，就是达到期望的效果的

<div class="outer">  
     父元素  
     <div class="inner">  
          <p>子元素和父元素重叠的部分被父元素遮挡</p>  
          <p>多余的部分漏出来-这是期望效果</p>  
     </div>  
</div>

// 父元素盖住子元素案例  
.outer {  
  // 这里设置了  relative  但是由于注释了 z-index   并没有产生 【层叠上下文】  
  position: relative;  
  width: 100px;  
  height: 200px;  
  background: salmon;  

  margin-top: 150px;  
}  

.inner {  
  position: absolute;  
  width: 500px;  
  height: 200px;  
  background: cadetblue;  
  z-index: -1;  
  text-align: right;  
}

这是纯HTML 实现的，期望的效果

1***@qq.com (作者) - 测试

edge 浏览器版本 108.0.1462.54 (正式版本) (64 位)

window10 操作系统

YUANRJ

您好，提供下具体版本，我这里测试正常

1***@qq.com (作者)

你说的具体版本是指什么， Hbuiler 的版本号吗？ Hbuilder X 3.6.15.20221228

我是编译成H5调试发现不行的

edge 浏览器版本 108.0.1462.54 (正式版本) (64 位)

window10 操作系统

2023-01-06 12:41
YUANRJ

回复 1***@qq.com: vue2还是vue3？你目前的效果截下图

2023-01-06 17:41
1***@qq.com (作者)

回复 YUANRJ: vue2 上面的 https://ask.dcloud.net.cn/uploads/questions/20230104/cdfeeb09020cac064d5e9819daf6dd17.png

就是不生效的效果图。

2023-01-07 18:06
1***@qq.com (作者)

回复 YUANRJ: 你能看到我自己对自己的跟帖吗？

2023-01-07 18:07

YUANRJ

检查下你的代码逻辑或上传下测试工程

1***@qq.com (作者)

好的我再创建一个空的工程试试，谢谢您的回复

2023-01-12 08:45

该问题目前已经被锁定, 无法添加新回复

z-index在 H5不生效

4 个回复

公告

相关问题

z-index在 H5不生效

与内容相关的链接

4 个回复

公告

相关问题