我真的是网络开发的新手，我希望我的图像能够显示在下拉 div 之外。我已经尝试将图像的位置设置为相对的、溢出可见的，但对我没有任何作用。在这里，我使用的是 tailwindcss 和 alpinejs。
这是交易下拉菜单的代码：
<!-- Trade -->
<div
class="hidden md:flex sm:ml-6"
id="nav-heading"
aria-labelledby="nav-heading"
x-data="{ tradeOpen: false }"
:aria-expanded="tradeOpen"
>
<button
type="button"
class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-900 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-lg hover:no-underline hover:text-gray-900 focus:outline-none focus:border-indigo-700 focus:text-gray-900"
:aria-expanded="tradeOpen"
aria-controls="nav-list"
@mouseenter.prevent="tradeOpen = !tradeOpen"
@click.away="tradeOpen = false"
>
Trade
</button>
<div
x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="tradeOpen"
id="nav-list"
class="absolute w-auto origin-top-left rounded-md shadow-lg top-16"
>
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Básico</p>
<p class="text-xs text-gray-500">A Forma Mais Fácil de Realizar Trades</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Clássico</p>
<p class="text-xs text-gray-500">Interface simples e fácil de usar, perfeita para iniciantes</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Avançado</p>
<p class="text-xs text-gray-500">Acesso completo a todas as ferramentas de trading em uma única tela</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Margem</p>
<p class="text-xs text-gray-500">Maximize os lucros com alta alavancagem</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">OTC</p>
<p class="text-xs text-gray-500">Melhores preços e maior liquidez para grandes trades</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">P2P</p>
<p class="text-xs text-gray-500">Transferência bancária e 100+ opções</p>
</div>
</div>
</a>
</div>
</div>
</div>
这是其包装 div 中的图像代码：
<!-- Collapsible Warning -->
<div class="w-full my-4">
<div x-data={show:true} class="rounded-sm">
<div :class="{'border-b-0': show}" class="flex flex-row justify-between px-10 py-4 bg-gray-100 border align-center" id="headingOne">
<div class="flex items-center mx-auto">
<h4 class="mb-0">Termine de configurar sua conta Exchange</h4>
</div>
<button @click="show=!show" class="focus:outline-none" type="button">
<svg x-show="!show" class="w-5 h-5" id="Capa_1" enable-background="new 0 0 451.111 451.111" height="512" viewBox="0 0 451.111 451.111" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m290 0 56.389 56.389-88.611 88.611 48.333 48.333 88.611-88.611 56.389 56.389v-161.111z"/><path d="m145 257.778-88.611 88.611-56.389-56.389v161.111h161.111l-56.389-56.389 88.611-88.611z"/><path d="m306.111 257.778-48.333 48.333 88.611 88.611-56.389 56.389h161.111v-161.111l-56.389 56.389z"/><path d="m161.111 0h-161.111v161.111l56.389-56.389 88.611 88.611 48.333-48.333-88.611-88.611z"/></svg>
<svg x-show="show" class="w-5 h-5" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="489.682px" height="489.682px" viewBox="0 0 489.682 489.682" style="enable-background:new 0 0 489.682 489.682;"
xml:space="preserve"> <g><g><polygon points="31.38,339.21 110.117,339.21 0,449.325 36.898,486.222 147.013,376.108 147.013,454.843 199.193,454.843
199.193,287.03 31.38,287.03"/><polygon points="458.302,339.21 458.302,287.03 290.488,287.03 290.488,454.843 342.669,454.843 342.669,376.108 452.782,486.222
489.682,449.325 379.564,339.21"/><polygon points="458.302,150.472 379.564,150.472 489.682,40.357 452.782,3.46 342.669,113.574 342.669,34.839 290.488,34.839
290.488,202.652 458.302,202.652"/><polygon points="147.013,113.574 36.898,3.46 0,40.357 110.117,150.472 31.38,150.472 31.38,202.652 199.193,202.652
199.193,34.839 147.013,34.839"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>
</button>
</div>
<div
x-show.transition.in.duration.500ms.origin.top.right.opacity.scale.1.out.duration.500ms.origin.bottom.left.opacity.scale.95="show"
class="grid grid-rows-3 gap-0 px-8 py-4 overflow-x-auto border border-t-0 sm:px-10 sm:py-6 sm:grid-rows-1 sm:gap-8 sm:grid-cols-3 lg:gap-6"
>
<div class="flex flex-col items-start justify-between col-span-1 py-4 border-b sm:border-transparent sm:py-0">
<div class="flex flex-row items-center justify-center">
<div class="flex flex-row items-center justify-center">
<img class="w-10 h-10 lg:w-12 lg:h-12" src="https://img.icons8.com/plasticine/100/000000/1-c.png"/>
<h4 class="mb-0 text-sm leading-5 text-indigo-800 lg:leading-6 lg:text-lg">Verifique sua Conta para Negociar Moeda Fiat</h4>
</div>
</div>
<div class="flex flex-row items-start mt-4">
<img class="transform scale-75 sm:scale-1" src="https://img.icons8.com/dusk/64/000000/id-verified.png"/>
<div class="flex flex-col ml-4">
<p class="text-xs text-black md:text-sm">Verifique sua identidade para negociar moedas fiat (como Dólar ou Euros) e aumentar seus limites de depósitos e retiradas.</p>
</div>
</div>
<button class="inline-flex items-center justify-center w-24 h-8 px-1 py-1 mt-4 font-medium text-white transition duration-150 ease-in-out bg-indigo-500 border border-transparent rounded-md sm:w-44 sm:h-10 sm:px-6 sm:py-3 text-md lg:text-base hover:bg-indigo-400 focus:outline-none focus:border-indigo-500 focus:shadow-outline-indigo active:bg-indigo-700" type="button">
<a href="#" class="text-xs text-white sm:text-sm lg:text-base hover:no-underline focus:text-gray-300 focus:no-underline hover:text-gray-200">VERIFICAR</a>
</button>
</div>
<div class="flex flex-col items-start justify-between col-span-1 pt-2 pb-4 border-b sm:border-transparent sm:py-0">
<div class="flex flex-row items-center justify-center">
<div class="flex flex-row items-center justify-center">
<img class="w-10 h-10 lg:w-12 lg:h-12" src="https://img.icons8.com/plasticine/100/000000/2-c.png"/>
<h4 class="mb-0 text-sm leading-5 text-indigo-800 lg:leading-6 lg:text-lg">Deposite em sua conta</h4>
</div>
</div>
<div class="flex flex-row items-start mt-4">
<img class="transform scale-75 sm:scale-1" src="https://img.icons8.com/dusk/64/000000/deposit.png"/>
<div class="flex flex-col ml-4">
<p class="text-xs text-black md:text-sm">Deposite criptomoedas e faça sua primeira negociação.</p>
</div>
</div>
<button class="inline-flex items-center justify-center w-24 h-8 px-1 py-1 mt-4 font-medium text-white transition duration-150 ease-in-out bg-indigo-500 border border-transparent rounded-md sm:w-44 sm:h-10 sm:px-6 sm:py-3 text-md lg:text-base hover:bg-indigo-400 focus:outline-none focus:border-indigo-500 focus:shadow-outline-indigo active:bg-indigo-700" type="button">
<a href="#" class="text-xs text-white sm:text-sm lg:text-base hover:no-underline focus:text-gray-300 focus:no-underline hover:text-gray-200">DEPOSITAR</a>
</button>
</div>
<div class="flex flex-col items-start justify-between col-span-1 pt-2 sm:pt-0 sm:py-0">
<div class="flex flex-row items-center justify-center">
<div class="flex flex-row items-center justify-center">
<img class="w-10 h-10 lg:w-12 lg:h-12" src="https://img.icons8.com/plasticine/100/000000/3-c.png"/>
<h4 class="mb-0 text-sm leading-5 text-indigo-800 lg:leading-6 lg:text-lg">Proteja Sua Conta</h4>
</div>
</div>
<div class="flex flex-row items-start mt-4">
<img class="transform scale-75 sm:scale-1" src="https://img.icons8.com/bubbles/100/000000/safe.png" />
<div class="flex flex-col ml-4">
<p class="text-xs text-black md:text-sm">A Verificação em Duas Etapas para Login mantém sua conta protegida ao adicionar mais um método de autenticação.</p>
</div>
</div>
<button class="inline-flex items-center justify-center w-24 h-8 px-1 py-1 mt-4 font-medium text-white transition duration-150 ease-in-out bg-indigo-500 border border-transparent rounded-md sm:w-44 sm:h-10 sm:px-6 sm:py-3 text-md lg:text-base hover:bg-indigo-400 focus:outline-none focus:border-indigo-500 focus:shadow-outline-indigo active:bg-indigo-700" type="button">
<a href="#" class="text-xs text-white sm:text-sm lg:text-base hover:no-underline focus:text-gray-300 focus:no-underline hover:text-gray-200">PROTEGER</a>
</button>
</div>
</div>
</div>
</div>