ABC三个竖放的盒子，A中有一个隐藏的盒子鼠标划过显示在下方，如何不遮挡BC盒子的显示（将BC推到隐藏盒子下方）

为了实现这种效果，你可以使用CSS的层叠上下文（z-index）和绝对定位（position:absolute）。这里是一个简单的HTML和CSS示例：

<div class="container">
  <div class="box box-a" style="height:100px;">A</div>
  <div class="box box-b" style="height:100px;">B</div>
  <div class="hidden-box hidden" style="height:100px; position:absolute; top:100px; background-color:red; z-index:-1;"></div>
  <div class="box box-c" style="height:100px;">C</div>
</div>

.container {
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-bottom: 10px;
}

.hidden-box {
  visibility: hidden; /* 隐藏隐藏的盒子 */
}

.box:hover + .hidden-box {
  visibility: visible; /* 当鼠标悬停在A上时，显示隐藏的盒子 */
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
}

/* 使用负的z-index值让隐藏的盒子位于其他盒子之下 */
.hidden-box {
  z-index: -1;
}

在这个例子中，当鼠标悬停在A盒上时，`hidden-box`会显示出来，由于设置了较低的z-index值，它不会遮挡B盒和C盒。同时，`transition`属性使得切换动画更自然。