Use CSS Anchor Positioning para manter um painel junto ao botão que o abriu e permitir que ele mude de lado quando falta espaço. Defina a ligação entre botão e painel, uma posição inicial e alternativas para as bordas da tela. Teste a mesma interação com ampliação, rolagem e teclado. O Interop 2026 inclui o posicionamento por âncoras entre os recursos cujo comportamento em casos específicos está sendo alinhado entre navegadores. Vale aproveitar a capacidade de adaptação do CSS com uma disposição básica que mantenha o painel utilizável no ambiente previsto pelo projeto.

Desenhe primeiro a relação entre o controle e o painel

Pense em um editor com uma lista de blocos. Cada linha tem um botão “Opções” que abre ações como duplicar e mover. Ao abrir uma linha perto do início, é natural encontrar o painel logo abaixo do botão. Para uma linha perto do fim da tela, o mesmo painel pode aparecer acima. O controle de origem deve continuar reconhecível nos dois casos, principalmente quando várias linhas têm botões iguais. Mantenha um espaçamento curto e consistente entre as duas superfícies.

Defina o lado preferido em relação ao fluxo do texto. Em uma interface em português, alinhar o painel ao fim da linha do botão é diferente de fixá-lo na direita da janela. Se a ferramenta também atender idiomas escritos da direita para a esquerda, especifique a relação com as bordas lógicas. Desenhe as versões acima e abaixo no protótipo. Se houver uma seta ou sombra assimétrica, verifique se o painel continua fazendo sentido quando muda de lado.

Associe a posição à âncora correta em listas repetidas

O CSS permite identificar o botão com anchor-name e indicar no painel qual âncora ele usa por meio de position-anchor. Com position-area, escolha a área relativa ao botão em que o painel deve aparecer. O guia de posicionamento por âncora da MDN explica a relação entre esses recursos e o uso de alternativas quando falta espaço. Inspecione o elemento posicionado em uma linha de teste antes de replicar o padrão em toda a lista.

Ao repetir o componente, teste dois botões com a mesma aparência e próximos um do outro. Se você declarar a mesma âncora explícita globalmente em várias linhas, a associação pode apontar para outra instância. Dê nomes distintos às âncoras explícitas ou delimite seu escopo conforme o suporte do projeto. Um popover ativado pelo botão associado pode obter uma âncora implícita. Se o componente usar essa associação, mantenha o vínculo entre controle e painel e valide-o depois de reordenar a lista.

Escolha a ordem das alternativas com conteúdo de verdade

Comece com a posição que preserva melhor a leitura da interface. Em um painel de ações com seis itens, abrir abaixo do botão permite percorrer a lista naturalmente quando há espaço. Use position-try-fallbacks para experimentar a inversão no eixo de bloco quando o painel estourar a borda. Se a largura também puder ultrapassar o espaço disponível, teste uma alternativa no eixo em linha. Observe cada tentativa em uma janela estreita com o botão junto ao canto.

Uma posição alternativa não cria espaço onde ele acabou. Limite a largura disponível, deixe rótulos longos quebrarem e, quando o conjunto de ações justificar, permita rolagem dentro do painel com altura máxima. Teste palavras compridas e ações com explicação em duas linhas. Se o painel mal comportar um item quando o teclado virtual abrir, considere uma apresentação no fluxo em telas pequenas. Deixe a escolha de layout no componente, com limites que possam ser revisados junto à tipografia.

Preserve abertura, navegação e retorno de foco

O posicionamento define a geometria. A abertura e o fechamento continuam sob responsabilidade do mecanismo de interação. Um painel com botões comuns pode usar o padrão descrito no artigo de popover nativo para ações contextuais. Se o componente realmente seguir um padrão de menu de aplicação, implemente também a navegação que esse padrão exige. Teste o conjunto a partir do controle de origem, com Tab, Shift e Tab, Enter e Escape conforme a interação escolhida.

Quando o painel fecha, confira onde está o foco. Se a ação removeu a linha inteira, o botão que abriu o painel também pode ter desaparecido. Defina antes um alvo coerente, como o botão da linha seguinte ou o controle que adiciona blocos quando a lista fica vazia. Faça o teste sem mouse. A leitura sobre foco visível na navegação por teclado ajuda a revisar a indicação visual quando o foco muda entre o gatilho e as ações.

Teste quando a âncora sai da área visível

Abra o painel no meio de uma lista com rolagem própria e continue rolando até que o botão saia da área visível. Decida se o painel deve fechar ou permanecer disponível de acordo com a tarefa. Uma ação que serve apenas àquela linha geralmente perde contexto quando a linha desaparece. Se o painel contiver um controle em uso, fechar na primeira oscilação da rolagem pode interromper a ação. Prototipe o comportamento com uma lista real e registre quando o componente precisa mover, ocultar ou restaurar foco.

Repita com um cabeçalho fixo e uma barra de ações no rodapé. O painel pode caber no viewport e ainda ficar sob outra região visual ou encobrir um controle importante. Observe também as listas dentro de diálogos e os contêineres que cortam conteúdo excedente. Quando usar um popover na camada superior, confira sua relação com esses limites. Faça a revisão com a página ampliada e com a barra do navegador móvel em estados diferentes.

Entregue uma disposição básica e uma matriz curta de testes

Monte primeiro uma versão em que o painel possa ser aberto perto do controle com o layout básico do componente. Aplique a posição avançada dentro de uma consulta de suporte que cubra as propriedades necessárias. Simule a falta desse suporte desativando a regra. O botão deve continuar abrindo o mesmo conteúdo, as ações devem continuar alcançáveis e a superfície deve acomodar os mesmos rótulos. Quando houver diferença de apresentação, descreva como o painel aparece em cada ambiente no material de implementação.

Antes de concluir, teste quatro casos: centro da tela, canto inferior, canto lateral e lista rolada. Em cada um, anote o botão usado, o lado em que o painel abriu e o destino do foco depois do fechamento. Repita com o conteúdo mais comprido que a equipe espera manter. O padrão está pronto quando todas as ações continuam disponíveis e a mudança de lado preserva a ligação percebida com o controle de origem.

Para reproduzir um problema, registre também a largura da janela, o nível de ampliação e qual contêiner estava rolando. Esses dados distinguem um erro de associação de um limite de espaço. Se o painel aparecer junto ao botão errado, investigue o nome e o escopo da âncora. Se aparecer junto ao botão certo, mas ocultar o último item, revise altura, alinhamento e ordem das alternativas.

Inclua um caso com linhas recolhíveis. Abra as opções de um bloco, recolha a região por um controle externo e observe a relação entre painel e botão. Se a linha deixar de existir, a interface precisa fechar o painel ou apresentar a ação em outro contexto explícito. Verifique também o caminho inverso, quando uma região antes recolhida passa a ocupar espaço acima do botão e desloca a linha. O painel precisa acompanhar a geometria atual enquanto o vínculo continua válido. Se a lista virtualiza linhas, verifique o que acontece quando o mesmo elemento é reaproveitado para exibir outro item. Uma ação deve operar sobre a linha identificada quando o painel foi aberto.