CSS Hover滑块实现问题：蓝色层显示在红色层前方

要解决蓝色层显示在红色层前方的问题，并实现预期的从右向左滑入效果，需要对CSS做以下调整：

• 给容器添加overflow: hidden，隐藏超出红色区域的蓝色部分
• 给红色的.static-content设置z-index: 1，确保它始终在蓝色层上方
• 调整蓝色层的初始位置为完全偏移到容器右侧，hover时平移回原位实现滑入

修改后的完整CSS代码：

.container {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden; /* 隐藏超出容器的内容 */

  .static-content {
    display: block;
    background-color: red;
    width: 100%;
    height: 100%;
    z-index: 1; /* 让红色层在蓝色层上方 */
    position: relative; /* 配合z-index生效 */
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0; /* 让蓝色层从容器左侧起始，方便平移控制 */
    background-color: #008CBA;
    height: 100%;
    width: max-content;
    transition: .5s ease;
    transform: translateX(100%); /* 初始完全偏移到容器右侧，隐藏状态 */
  }
}

.container:hover .overlay {
  transform: translateX(0); /* hover时平移回原位，实现滑入效果 */
}

HTML代码保持原结构即可：

<div class="container">
  <div class="static-content">
  </div>
  <div class="overlay">
    OverLay Content - this will be some text
  </div>
</div>

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