蒙层底部不动 & z-index失效

蒙层底部不滚动

打开蒙层时添加

$('body').css({
   'overflow': 'hidden',
   'height': '100%'
 })

关闭蒙层时添加

$('body').css({
   'overflow': 'scroll',
 })

弊端：此方法在安卓系统中简单实用，但是在ios系统中并不能完美生效
那么为了更好的兼容各类系统，我个人比较推荐第二种方法，如下：

// 监听滚动条到页面顶部的距离
scrollToBottom = () => {
   let scrollTop = $(window).scrollTop()
   if (scrollTop <= 0) return
   this.currentTop = scrollTop
 }

// 页面添加监听滚动事件
window.addEventListener('scroll',this.scrollToBottom.bind(this))

 // 蒙层出现时
 $('body').css({ position: 'fixed', top: -this.currentTop })

// 蒙层关闭
$('body').removeAttr('style')
$(window).scrollTop(this.currentTop)

Z-index失效

父元素添加相对定位，第二个子元素相对定位，第一个子元素添加z-index失效，被第二个子元素遮挡，要想第一个子元素在第二个子元素上方展示，要给第一个子元素添加相对定位

html标签:

<ul className="title-word">
   <li><p>真正的一家人</p><span></span></li>
   <li><p>每一个礼物，每一次点亮，每一天陪伴，都能给我勇气</p><span></span></li>
   <li><p>每一份守护都是最真挚的感情。</p><span></span></li>
</ul>

css样式：

.title-word {
  position: relative;
  li{   
    width: max-content;
    margin: 0 auto;
    position: relative;
    span{
      width: 100%;
      display: block;
      height: 18px;
      background: #DFD0A9;
      border-radius: 2px;
      opacity: 0.73;
      position: absolute;
      bottom: 5px;
      z-index: 1;
    }
    p{
      padding: 0 10px;
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #5B3319;
      line-height: 52px;
      z-index: 5;
      position: relative;
    }
  }
}

第一个子元素添加相对定位后：

第一个子元素未添加定位前：