【问题标题】：Why overflow-hidden in tailwind css still appear in front of other element为什么顺风css中的溢出隐藏仍然出现在其他元素的前面
【发布时间】：2020-07-24 22:17:52
【问题描述】：
我用变换创建了一个简单的图像布局。我已经在父 div 中添加了溢出隐藏类，但缩放后的图像溢出仍然出现在上图的前面。如何防止溢出的图像出现在上图的前面？
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 bg-gray-400 relative overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 bg-gray-400 relative overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden relative">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 origin-center transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 bg-gray-400 overflow-hidden">
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="w-1/4 bg-gray-400 overflow-hidden">
<img class="object-cover w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" style="height: 50%" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
【问题讨论】：
标签：
html
css
tailwind-css
【解决方案1】：
这里有几个问题。
“溢出：隐藏”不适用于内联元素，但“a”标签是内联的。
你在这个内联元素上使用了宽度和高度（你不应该）。
除非孩子将被绝对定位，否则您不需要使用 relative 和溢出。
除了 style="height: 50%" 之外，还使用顺风 (h-1/2) 会更好。
但你不需要元素的高度为 50%，只需在父元素上设置 flex 和 flex-col。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex" style="height: 50vh">
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="flex-1 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<div class="flex-1 flex flex-col bg-gray-400 overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
<div class="flex-1 flex flex-col bg-gray-400 relative overflow-hidden">
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
此外，这个模板看起来像是网格 css 实用程序的完美示例。所以你也可以使用这样的网格来代替弹性框：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 grid-rows-2" style="height: 50vh">
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover origin-center h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1519638399535-1b036603ac77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt="">
</a>
<a href="#" class="col-span-1 row-span-2 block bg-gray-400 overflow-hidden">
<img class="object-cover h-full w-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
<a href="#" class="col-span-1 block bg-gray-400 overflow-hidden">
<img class="object-cover w-full h-full hover:opacity-75 transition ease-in-out duration-150 hover:scale-110 transform" src="https://images.unsplash.com/photo-1569701813229-33284b643e3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>