如何实现不遮挡页面内容的可交互CSS Grid组件网格？

核心问题在于Grid容器默认会拦截鼠标事件，且z-index生效需要依赖定位属性。以下是直接可用的解决方案：

关键思路 #

1. 让容器不拦截底层交互：给Grid容器设置pointer-events: none，鼠标事件会直接穿透到下方主内容；但要给每个Widget单独开启pointer-events: auto，保证自身可交互。
2. 明确层级与定位：给容器和主内容都设置定位属性（position），再通过z-index确保Widget网格在主内容上方。
3. 脱离文档流避免占位：用absolute或fixed定位让Grid容器不占据主内容的布局空间，方便随意放置。

代码示例 #

HTML结构 #

<!-- 主内容区域 -->
<div class="main-content">
  <input type="text" placeholder="点击我试试" />
  <button>主内容按钮</button>
  <p>这是主内容的文本，你可以选中或者点击这里的元素</p>
</div>

<!-- Widget网格容器 -->
<div class="widget-grid">
  <div class="widget">Widget 1</div>
  <div class="widget">Widget 2</div>
  <div class="widget">Widget 3</div>
  <div class="widget">Widget 4</div>
</div>

CSS样式 #

/* 主内容样式 */
.main-content {
  padding: 2rem;
  position: relative;
  z-index: 1; /* 明确主内容层级 */
}

/* Widget网格容器 */
.widget-grid {
  position: absolute; /* 脱离文档流，可通过top/left自由定位 */
  top: 50px;
  left: 50px;
  display: grid;
  grid-template-columns: repeat(2, 120px);
  grid-gap: 10px;
  z-index: 2; /* 让网格在主内容上方 */
  pointer-events: none; /* 容器不拦截鼠标事件 */
}

/* 单个Widget */
.widget {
  padding: 1rem;
  background: rgba(255, 100, 100, 0.8);
  border-radius: 4px;
  pointer-events: auto; /* 恢复Widget的交互能力 */
  cursor: pointer;
}

.widget:hover {
  background: rgba(255, 100, 100, 1);
}

补充说明 #

• 如果需要Widget网格固定在视口不随滚动移动，把容器的position: absolute改成position: fixed即可。
• 若容器需要背景，用透明或半透明背景（如rgba），不会影响事件穿透效果。
• 检查父元素是否有overflow: hidden或异常的z-index设置，这类属性可能干扰层级关系。

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