蒙层底部不动 & 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; } } }

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