每当在元素上添加绝对位置时，网格 2x2 消失的项目

Question

我在 css 中的网格显示中遇到了一个非常奇怪的问题，如果我有至少 1 张未设置为绝对的图像，下面的代码就可以工作（显示所有图像）定位，否则，全部消失。对此有任何想法或解决方法吗？

<div className="grid grid-cols-2">
  <div className="shapeA overflow-hidden aspect-square relative">
    <img src="/mizuki.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeB overflow-hidden aspect-square relative">
    <img src="/ena.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeC overflow-hidden aspect-square relative">
    <img src="/mafuyu.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeD overflow-hidden aspect-square relative">
    <img src="/kanade.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
</div>

Answer 1

您必须为元素设置宽度，否则将无法正确显示所有项目。一个有效的 jsfiddle 会更好，或者 link 到有问题的页面

每当在元素上添加绝对位置时，网格 2x2 消失的项目

Grid 2x2 disappearing items whenever adding the absolute position on the element

css

jsx

tailwind-css