如何使用Nextjs Tailwind在彼此之上实现3盒？
如何使用Nextjs Tailwind在彼此之上实现3盒？
提问于 2022-01-19 21:04:10
我正在尝试添加/样式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>回答 2
Stack Overflow用户
回答已采纳
发布于 2022-01-19 22:12:25
这就是如何实现以下目标：
<!-- 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>
Stack Overflow用户
发布于 2022-01-19 22:10:13
你有所有的盒子与填充嵌套。因为它们是嵌套的，所以被认为是孩子。父母有垫子。考虑有一个父母有一个亲戚的位置和三个盒子有一个绝对的位置。
<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上给你做了个例子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70777720
复制相关文章
相似问题
腾讯云开发者
