前端如何让一个元素展示在另一个元素的上面但是不影响下面的元素的事件

可以通过 CSS 属性 `position` 和 `z-index` 来实现。

首先，将需要显示在上层的元素的 `position` 属性设置为 `absolute` 或 `fixed`，然后通过 `top`、`bottom`、`left`、`right` 属性来定位它在页面中的位置。

接着，给需要被遮挡的元素设置一个较低的 `z-index` 值，给需要显示在上层的元素设置一个较高的 `z-index` 值。这样就可以让需要显示在上层的元素覆盖在需要被遮挡的元素之上了。

如果需要在需要显示在上层的元素上添加交互事件，可以使用 CSS `pointer-events` 属性来设置，例如将其设置为 `none`，则鼠标事件会穿透该元素，直接作用于下面的元素。

示例代码：

<div class="container">
  <div class="bottom-element"></div>
  <div class="top-element"></div>
</div>

.container {
  position: relative;
}

.bottom-element {
  position: relative;
  z-index: 1;
}

.top-element {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
  pointer-events: none;
}