如何使用Nextjs Tailwind实现3个盒子叠在一起

Question

我正在尝试添加/style 3个堆叠在一起的盒子，然后将图像作为附加到上面

https://i.stack.imgur.com/jVdIo.png

我能够做到这一点，但它倾向于

https://i.stack.imgur.com/fl0Zz.png

<div className='flex flex-col box-border rounded strok h-60 w-48 p-4  border-2 ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
</div>
</div>
</div>

Answer 1

所有的框都嵌套了填充。因为它们是嵌套的，所以被认为是孩子。父母有填充物。考虑有一个位置为相对的父对象和位置为绝对的3个框。

<div class="h-screen w-screen bg-gray-200 py-20 flex justify-center items-center sm:py-12">
<div class="h-40 w-40 relative">
<div class="rounded h-[150px] w-[150px] bg-red-700 absolute z-30 left-1"> 
</div>
<div class="rounded h-[150px] w-[134px] bg-slate-500 absolute z-20 top-3 left-3"></div>
<div class="rounded h-[142px] w-[118px] bg-black absolute z-10 top-8 left-5"></div>

我在顺风操场上为你做了一个榜样https://play.tailwindcss.com/MJnaFMVio6

Answer 2

这就是如何实现的：

<!-- Background -->
<div class="mx-auto h-[500px] w-[500px] flex justify-center items-center bg-blue-500 relative p-[10px]">
<!-- Boxes container -->
<div class="relative">
<div class="relative mt-4 mx-4 h-full">
<!-- Boxes stacked behind -->
<div class="absolute -bottom-4 scale-[0.85] origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-2xl"></div>
<div class="absolute -bottom-2 scale-95 origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-3xl shadow-sm"></div>
<!-- Box on top -->
<div class="p-4 bg-white/60 backdrop-blur-md rounded-3xl h-full">
<img class="rounded-[20px]" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
</div>
</div>
</div>
</div>

关于顺风游戏：https://play.tailwindcss.com/dmU2c4ai36