Início / coding / Perguntas / 79557550
Accepted
QFaZo Play
Asked: 2025-04-06 05:40:58 +0800 CST

z-index do BackButton sendo bloqueado por outro componente

  • 772

no meu projeto NextJS, criei o componente BackButton

Este botão é fixo para seguir o usuário na rolagem para baixo e deve ser colocado mais longe de qualquer conteúdo no site para que não seja bloqueado por outros componentes.

para isso eu uso z-index e posição fixa obviamente

O problema é que há um componente que está mais distante do BackButton em z-index, não importa quão alto seja o valor que eu use.

aqui está o botão, tudo é simples, você pode até ver até onde eu uso o z-index, embora isso ainda não ajude:

import { ArrowLeftIcon } from "lucide-react";
import { useRouter } from "next/navigation";

const BackButton = () => {
  const router = useRouter();

  return (
    <button
      onClick={() => router.back()}
      className="fixed top-4 left-4 z-[990000] bg-black text-white hover:bg-gray-600 duration-200 rounded-full p-2"
    >
      <ArrowLeftIcon width={40} height={40} />
    </button>
  );
};

export default BackButton;

e aqui está um exemplo de um componente que vai além do BackButton:

 <div className="bg-slate-200 shadow-md rounded-lg p-4 mb-4 hover:-translate-y-1 duration-500 hover:shadow-xl relative">
   {CONTENT}
 </div>

Sim, o -translate-y-1 está sendo usado e, quando o cursor passa, ele vai além do botão. Mas essa não é a causa do problema, pois mesmo que eu remova essa propriedade CSS, o BackButton ainda será colocado atrás deste componente.

A maneira como eu uso esse botão é como um componente de layout em layout.tsx, para que ele possa estar em qualquer página possível do site:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <QueryProvider>
          <div className="ml-4 mt-4 fixed top-0 left-0">
            <BackButton />
          </div>

          <div className="mt-10">{children}</div>

          <ToastContainer />
        </QueryProvider>
      </body>
    </html>
  );
}
css

2 respostas

  1. Como seu botão tem um contêiner, certifique-se de que o contêiner esteja no topo da pilha:

    ...
<div className="ml-4 mt-4 fixed top-0 left-0 z-[990000]">
  <BackButton />
</div>
...

    E então, naquele botão:

    ...
<button
  onClick={() => router.back()}
  className="fixed top-4 left-4 z-[990001] bg-black text-white hover:bg-gray-600 duration-200 rounded-full p-2 shadow-lg"
>
  <ArrowLeftIcon width={40} height={40} />
</button>
...
    • 1
  2. Best Answer

    Acho que o problema é que você aninhou o BackButtondentro de outro div. Ambos têm fixedposicionamento, o que cria um problema de posicionamento composto. O pai divpode estar estabelecendo seu próprio contexto de empilhamento, o que limita como o z-indexdo BackButtoné interpretado.

    Então eu diria que a solução mais simples é mover seu BackButtonarquivo DOM para o nível mais alto possível.

    export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <QueryProvider>
          {/* BackButton directly in body, not nested */}
          <BackButton />
          
          <div className="mt-10">{children}</div>

          <ToastContainer />
        </QueryProvider>
      </body>
    </html>
  );
}
    • 1

relate perguntas