如何让CSS Grid子元素脱离网格布局？排除position:fixed与display:contents

针对你的需求，除了position: fixed和display: contents，以下是两种实用方案：

方案1：使用position: absolute #

给目标自定义组件设置position: absolute，它会完全脱离Grid容器的布局流，不再参与行列分配。同时，该组件会成为内部position: absolute元素的定位基准（而非视口），解决了fixed带来的定位问题。

示例代码：

#exemptedElement {
  position: absolute;
  /* 可选：若需要保留组件在Grid中原有的视觉位置，可根据Grid行列尺寸调整top/left值 */
  top: 0;
  left: 0;
}

注意：absolute会让元素脱离正常文档流，若需避免原位置布局塌陷，可在组件同级添加一个与组件尺寸一致的空元素作为占位符。

方案2：嵌套普通容器包裹组件 #

如果允许修改DOM结构，可在目标组件外层添加一个普通块级容器（如<div>）。这个容器会成为Grid容器的子项，而组件作为容器的内部元素，将完全脱离Grid布局的控制，内部定位元素的基准也不会受影响。

修改后的HTML结构 #

<!-- Grid容器（如body）内的结构 -->
<div class="exempt-wrapper">
  <custom-web-component id="exemptedElement"></custom-web-component>
</div>

对应CSS #

.exempt-wrapper {
  /* 无需额外Grid属性，默认display:block，它会作为Grid项布局，但内部组件不受Grid规则约束 */
}

该方案的优势是组件保持在正常文档流中，不会出现布局塌陷，同时彻底隔离了Grid布局的影响。

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