我有一个Lity锚链接，应该会弹出一个包含YouTube视频的模式。奇怪的是，这在Chrome桌面上运行得很好，但在Safari和Chrome Mobile上，链接无法点击，只有一小块区域。我已经尝试了各种Z索引，各种指针事件，并尝试完全删除绝对定位，但它仍然无法在移动设备上点击。

我添加了边框来显示可点击区域与不可点击区域的位置。红色/绿色边框外的蓝色允许模态弹出。在红色/绿色里面，它是不可点击的。

同样，这只适用于Safari和Chrome移动浏览器，在桌面上一切正常。

下面是HTML结构

<代码><；DIV类="；特色视频"；>；<；a href="；https：//www.youtube.com/embed/_xxxxxx"数据-lity="；"；类="；视频链接"；>；<；IMG data-SRC="；https：//i3.ytimg.com/vi/xxxxxx/hqdefault.jpg" alt="；产品视频"；类="；视频图像延迟加载"；源="；https：//i3.ytimg.com/vi/_r1cnai4pkm/hqdefault.jpg"><；span类="；YT-拇指按钮"；>；.<；/span>；<；/a>；<；/DIV>；

这是我的CSS/SCSS

<代码>.特色视频{位置：相对；垫底：56.25%；/* 16:9 */高度：0；Z指数：100；指针事件：无；边框：1px纯蓝色；.视频链接{位置：绝对；顶部：0；左：50%；宽度：90%；高度：90%；转换：TranslateX（-50%）；Z指数：101；显示：块；边框：1px实心石灰绿；指针事件：自动；}}.yt-拇指按钮{显示：块；位置：绝对；顶部：0；左：0；底部：0；权利：0；//Z-index：1；背景：URL（https：//cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png）无重复中心中心；背景大小：20%；颜色：透明！重要的；指针事件：无；边框：1px纯红色；&；：悬停{不透明度：.4；过渡：不透明度.2S缓和输出；}}

可点击区域图像

顺晟科技：

的.featured-video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; z-index: 100; pointer-events: none; border: 1px solid blue; .videoLink { position: absolute; top: 0; left: 50%; width: 90%; height: 90%; transform: translateX(-50%); z-index: 101; display: block; border: 1px solid limegreen; pointer-events: auto; } } .yt-thumb-button { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; // z-index: 1; background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center; background-size: 20%; color: transparent !important; pointer-events: none; border: 1px solid red; &:hover { opacity: .4; transition: opacity .2s ease-out; } } 大于您的按钮类。将z-index的.featured-video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; z-index: 100; pointer-events: none; border: 1px solid blue; .videoLink { position: absolute; top: 0; left: 50%; width: 90%; height: 90%; transform: translateX(-50%); z-index: 101; display: block; border: 1px solid limegreen; pointer-events: auto; } } .yt-thumb-button { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; // z-index: 1; background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center; background-size: 20%; color: transparent !important; pointer-events: none; border: 1px solid red; &:hover { opacity: .4; transition: opacity .2s ease-out; } } 值设置为999。