收藏
回答

relative定位后被遮挡使用z-index为什么无效?

定位后被遮挡,我解决方案是用z-index,但是发现还是被遮挡,求助各位师傅。

wxml:

 <view class="container">
   <view class="page-body">
    <swiper class="body-pic" indicator-dots="true" autoplay="ture" interval="2000">
      <swiper-item> <image src='/images/bg7.jpg'></image></swiper-item>
      <swiper-item> <image src='/images/bg2.jpg'></image></swiper-item>
      <swiper-item> <image src='/images/bg3.jpg'></image></swiper-item>
        </swiper>
         </view>
  <view class='notice-wrap' hidden='{{hideNotice}}'>
  <view class='tongzhitext'>
    <text class="tongzhi-text">{{notice}}</text>
  </view>
  <text bindtap='switchNotice' class="closeView">x</text>
</view>
</view>
 

wxss:

.container { 
 height100%; 
 display: flex; 
 flex-direction: column; 
 padding0; 
 box-sizing: border-box; 
} 
.page-body{
  width100%;
}
.body-pic{
  width100%;
  height250px;
}
.body-pic image{
  width100%;
  height250px;
}
/* 公告 */
@keyframes remindMessage {
  0% {
   -webkit-transformtranslateX(90%);
  }
  
  100% {
   -webkit-transformtranslateX(-180%);
  }
 }
  
 .tongzhitext {
  margin-right:80rpx;
  margin-left10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index:1;
 }
  
 .tongzhi-text {
  font-size28rpx;
  animation: remindMessage 14s linear infinite;
  width100%;
  color#d09868;
  display: block;
  position: relative;
  top: -55px;
  z-index:9999;
 }
  
 .notice-wrap {
  background#ffebda;
  width100%;
  height60rpx;
  line-height60rpx;
  color#d09868;
  font-size28rpx;
  z-index:1;
 }
  
 .closeView {
  width45rpx;
  height45rpx;
  line-height45rpx;
  position: absolute;
  right20rpx;
  top5rpx;
  text-align: center;
  font-size35rpx;
  position: absolute;
  left:95%;
  top:245px;
  z-index:999;
 }


回答关注问题邀请回答
收藏

4 个回答

  • 俞哄哄💻📷🤘🚴🎧
    俞哄哄💻📷🤘🚴🎧
    2020-04-23

    是这个效果吗(不知道你想要的效果是啥)

    /* 公告 */
    @keyframes remindMessage {
      0% {
       -webkit-transformtranslateX(90%);
      }
      
      100% {
       -webkit-transformtranslateX(-180%);
      }
     }
    .notice-wrap {
      width100%;
      background#ffebda;
      height100%;
      position: relative;
      color#d09868;
    }
    
    
    .tongzhitext{
      width90%;
      padding0 5%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    
    
    }
    
    
    
    
    .tongzhi-text {
      font-size28rpx;
      animation: remindMessage 14s linear infinite;
      width90%;
      height60rpx;
      display: flex;
      align-items: center;
    }
    
    
    .closeView {
      width45rpx;
      background#ffebda;
      height45rpx;
      line-height45rpx;
      position: absolute;
      right0rpx;
      top0rpx;
      text-align: center;
      font-size35rpx;
      position: absolute;
      z-index999;
    }
    


    若有帮助请帮忙点个"有用"谢谢↓↓

    2020-04-23
    有用 1
    回复
  • 睡前原谅一切
    睡前原谅一切
    2020-04-23

    把你的有问题的代码照着这个文档 写一个代码片段出来

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-04-23
    有用
    回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2020-04-23
    .tongzhitext {
      margin-right:80rpx;
      margin-left: 10rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: relative;
      z-index:1;
     }
      
     .tongzhi-text {
      font-size: 28rpx;
      animation: remindMessage 14s linear infinite;
      color: #d09868;
      display: block;
     }
      
     .notice-wrap {
       position: relative;
      background: #ffebda;
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      color: #d09868;
      font-size: 28rpx;
     }
      
     .closeView {
      width: 45rpx;
      height: 45rpx;
      line-height: 45rpx;
      position: absolute;
      right: 20rpx;
      top: 5rpx;
      text-align: center;
      font-size: 35rpx;
     }
    

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    2020-04-23
    有用
    回复 2
  • 小唐。
    小唐。
    2020-04-23

    好奇怪,如果不用z-index是否有其他解决方案呢

    2020-04-23
    有用
    回复
登录 后发表内容
问题标签