前端 video 元素总是浮在最上方,增加一个 z-index 属性

简介: 前端 video 元素总是浮在最上方,增加一个 z-index 属性

今天在 table 表格里每行渲染了一个视频,设置了首列固定,但是发现左右滑动表格时,当视频那列经过首列的位置时,视频会浮在首列元素上方,查了一下,用 z-index 设置 z 属性层级解决了。

在react ant-design 里 z-index写法是:zIndex ,把这个参数设置为0,这样在滑动页面时视频就不会浮在其他元素上面了,当然这只是我的情况用这个可以解决,好像网上很多情况用这个解决不了。

<div id=xx style={{ zIndex: 0 }} />

如果还没解决或许可以参考这个video元素优先级比较高会使它浮在包裹元素上的解决办法

相关文章
|
3月前
|
前端开发 搜索推荐 开发者
揭秘Web前端的隐形英雄:神奇的title与alt属性,你真的了解吗?
【8月更文挑战第26天】在Web开发中,`title`和`alt`属性对于提升网站的可访问性和搜索引擎优化至关重要。`title`属性可在鼠标悬停时显示额外信息,增强用户体验;`alt`属性主要用于图像,提供替代文本以确保视觉障碍用户及搜索引擎能理解图像内容。正确使用这两个属性可以显著提高网站的友好性和可达性。
85 0
|
2月前
|
前端开发
前端基础(十三)_定位position、定位层级z-index
本文讲解了CSS中的定位机制,包括静态定位、相对定位、绝对定位和固定定位,并通过实例展示了如何使用这些定位方法调整元素位置。同时,还介绍了z-index属性的使用,解释了如何通过调整z-index值来改变定位元素的层叠顺序。
30 6
前端基础(十三)_定位position、定位层级z-index
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
28 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
41 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
64 1
前端基础(十四)_隐藏元素的方法
|
2月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
89 3
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
55 1
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
41 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
69 0