如何解决Tailwind CSS网格中固定col-span-2元素覆盖col-span-1的问题

使用position: fixed会让元素脱离正常文档流并相对于视窗定位，这就是它覆盖右侧列的原因。以下两种方案可以让固定列保持在网格的指定位置：

方案一：绝对定位配合网格占位 #

给网格容器添加relative类，让固定元素相对于网格容器定位，同时保留col-span-2占据网格空间，避免右侧列移位：

<div className="h-full">
  <div className="grid grid-cols-3 w-full h-full relative">
    <div className="col-span-2 h-full top-0 left-0 fixed overflow-y-hidden">
      <div className="w-full h-full bg-black text-white">ghhh</div>
    </div>
    <div id="content-wraper" className="col-span-1 bg-white h-full w-full"></div>
  </div>
</div>

方案二：粘性定位（适合滚动固定场景） #

如果只需要滚动时保持列固定，sticky是更优选择，它不会脱离网格布局，自然占据前两列位置：

<div className="h-full">
  <div className="grid grid-cols-3 w-full h-full">
    <div className="col-span-2 h-full top-0 sticky overflow-y-hidden">
      <div className="w-full h-full bg-black text-white">ghhh</div>
    </div>
    <div id="content-wraper" className="col-span-1 bg-white h-full w-full"></div>
  </div>
</div>

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