如何用Tailwind CSS实现图片从Div顶部向外突出？

当前效果：图片被完全限制在蓝色背景div的内部顶部，未超出边界
预期效果：图片顶部超出蓝色背景div的上边界，呈现向外突出的视觉效果

相关代码：

<div class="px-5 sm:px-10 mx-auto mt-12 mb-10">
    <div class="grid justify-around px-4 py-20 bg-[#1BB3D8] gap-14 lg:gap-16 lg:grid-cols-2 sm:px-6 lg:px-8 rounded-3xl">
        <img src="/img/landing/WerSindWir.svg" class="w-full">
        <div class="font- text-white my-auto">
            <h3 class="text-break">
                <span class="text-xl font-[600] tracking-normal">LoremIpsum - LoremIpsum</span><br>
                <span class="text-30 md:text-5xl"><span class="font-[700]">Wer</span> sind wir?</span>
            </h3>
            <p class="mt-5 text-xl">LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum</p>
        </div>
    </div>
</div>

实现方案 #

你可以通过两种简单的Tailwind CSS类调整实现效果：

方法1：负margin偏移 #

给图片添加负的margin-top类，让它向上超出父容器顶部边界，同时搭配正margin-bottom避免下方内容错位：

<img src="/img/landing/WerSindWir.svg" class="w-full mt-[-80px] mb-8">

• 数值-80px可根据实际需求调整，直到达到理想的突出程度。

方法2：transform平移 #

使用transform: translateY()让图片向上移动，这种方式不会影响其他元素的布局：

<img src="/img/landing/WerSindWir.svg" class="w-full transform -translate-y-20">

• -translate-y-20对应Tailwind预设值（约-5rem），也可自定义数值如-translate-y-[80px]。

注意点 #

• 确保父级.grid容器未设置overflow:hidden（默认是overflow:visible，通常无需额外修改），否则超出部分会被裁剪。
• 可针对不同屏幕尺寸设置响应式偏移量，比如md:mt-[-100px]，适配多端显示效果。

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