Estou tentando trabalhar com âncoras CSS (sei que é experimental, mas ainda assim). Estou tentando ancorar um botão à direita de uma barra lateral. A barra lateral é traduzida para fora da tela quando fechada, trazida de volta quando aberta. Quero que o botão ancorado na barra lateral siga o curso da barra lateral, mas não consigo fazer com que ele siga a tradução.
document.querySelector('button')
.addEventListener('click', () => {
document.querySelector('aside').setAttribute("aria-expanded", "true");
}
)div {
background: red;
height: 200px;
}
aside {
width: 30px;
background: green;
position: absolute;
right: 0;
inset-block: 0;
transition: all 1s;
transform: translateX(100%);
anchor-name: --anchor-name;
}
aside[aria-expanded="true"] {
transform: translateX(0);
}
button {
position: absolute;
position-anchor: --anchor-name;
right: anchor(--anchor-name left);
top: 50%;
transform: translateY(-50%);
}
body { margin: 0; }<div>
<aside></aside>
<button >Expand</button>
</div>Não consigo encontrar nenhum recurso que descreva esse comportamento. Algum hack para fazer isso funcionar? Editar: Estou trabalhando no Chrome 130.0.6723.116