HTML页面重叠div hover时底部栏不显示问题排查

• 定位父级设置错误：当前仅给外层table.wrapper设置了position: relative，承载视频的td单元格.videocontent未设置定位属性，导致头、底栏的绝对定位是相对于整个table计算，而非当前悬浮的单个td。
• 头部栏显示正常属于巧合：头部栏初始top:-50px的位置刚好落在第一个td上方，hover时top:0刚好对齐第一个td顶部，造成功能正常的假象；底部栏初始bottom:-50px是相对整个table底部计算，完全落在table可视区域外，同时td默认会裁剪溢出边界的内容，哪怕hover触发样式也无法正常显示在对应td底部。
• 样式缺陷：底部栏未设置固定高度，内容会直接塌陷；头、底栏宽度设为50%是参考table宽度，多列场景下会出现尺寸错位。

• 第一步：修正td单元格的基础样式，让每个td成为内部绝对定位元素的参考容器

.videocontent{
    position: relative; /* 核心：作为内部头/底栏的定位参考父级 */
    width: 25%; /* 4列表格对应每列宽度25%，原来的50%仅适配2列场景 */
    height: 150px;
    background-color: #78b5e9;
    overflow: visible; /* 允许头/底栏偏移到单元格外时不被裁剪 */
    vertical-align: top; /* 取消单元格默认垂直居中导致的定位偏移 */
}

• 第二步：重写头、底栏样式，修正定位、尺寸问题

.videocontent .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 宽度适配父td，不再写死50% */
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: #cccccc;
    background: #1f1f1f;
    z-index: 10;
    /* 用transform+opacity实现显示隐藏，比display:none更流畅，支持过渡动画 */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.videocontent .header .text {
    float: left;
    padding-left: 10px;
}

.videocontent .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 补全固定高度，避免内容塌陷 */
    color: #ccc;
    background: #1f1f1f;
    z-index: 10;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

• 第三步：修正hover触发样式，统一伪类为小写规范写法

.videocontent:hover .header,
.videocontent:hover .footer{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* 显示时允许点击底部栏的功能按钮 */
}

• 第四步：补全所有视频单元格的结构，每个td内都需要放置对应的头、底栏元素

<table class="wrapper">
    <tr>
        <td class="videocontent">
            <div id="content1"></div>
            <div class="header"><span class="text">视频1</span></div>
            <div class="footer"><!-- 播放/暂停/全屏按钮放此处 --></div>
        </td>
        <td class="videocontent">
            <div id="content2"></div>
            <div class="header"><span class="text">视频2</span></div>
            <div class="footer"><!-- 播放/暂停/全屏按钮放此处 --></div>
        </td>
        <td class="videocontent">
            <div id="content3"></div>
            <div class="header"><span class="text">视频3</span></div>
            <div class="footer"><!-- 播放/暂停/全屏按钮放此处 --></div>
        </td>
        <td class="videocontent">
            <div id="content4"></div>
            <div class="header"><span class="text">视频4</span></div>
            <div class="footer"><!-- 播放/暂停/全屏按钮放此处 --></div>
        </td>
    </tr>
</table>

提示：:hover伪类建议统一使用小写写法，符合W3C规范，避免在低版本或特殊内核浏览器下出现兼容问题。

内容的提问来源于stack exchange，提问作者WCM