Estoy tratando de crear un menú desplegable, pero su div (que es una posición estática) sigue subiendo a medida que agrego nuevos elementos al menú.
Es la regla align-items:center la que sigue reposicionando el elemento para que esté correctamente alineado verticalmente.
Si descarto esta regla, romperá la barra de navegación, los otros elementos no estarán centrados como pretendía.
Si uso la propiedad de display , como muestra el código a continuación, el botón comienza donde quiero, pero cada vez que hago clic en él, se sale de su lugar.
const dropdown = () => { let display = document.getElementById("menu").style.display; document.getElementById("menu").style.display = (display === "none") ? "block":"none"; //toggling "visibility" takes the div out of its place } .nav { display: flex; justify-content: center; align-items: center; height:160px; border:1px solid black; text-align: center; } .dropdownContainer { margin-left: auto; } #drop { display:none; /* visibility:hidden;*/ } <nav class="nav"> <div>Irrelevant elements to this question</div> <div class="dropdownContainer"> <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> <div id="menu"> <!-- the more items added here, the more up the page the whole container goes --> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> </div> </div> </nav> Si cambio el código JS para que alterne la propiedad de visibility , el botón ya comienza fuera de su posición prevista, pero tampoco cambia de lugar cuando se hace clic en él.
¿Cómo puedo mantener el botón centrado como está y hacer que el menú se despliegue sin cambiar el lugar del botón?
Creo que eso es lo que quieres lograr:
Coloqué su menú debajo del botón con posición absoluta. para que el botón no cambie de posición.
const dropdown = () => { let display = document.getElementById("menu").style.display; document.getElementById("menu").style.display = (display === "none") ? "block":"none"; //toggling "visibility" takes the div out of its place } .nav { display: flex; justify-content: center; align-items: center; height: 160px; border: 1px solid black; text-align: center; } .dropdownContainer { margin-left: auto; position: relative; } #drop { display: none; /* visibility:hidden;*/ } #menu { position: absolute; top: 100%; } <nav class="nav"> <div>Irrelevant elements to this question</div> <div class="dropdownContainer"> <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> <div id="menu"> <!-- the more items added here, the more up the page the whole container goes --> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> </div> </div> </nav> const dropdown = () => { let display = document.getElementById("menu").style.display; document.getElementById("menu").style.display = (display === "none") ? "block":"none"; //toggling "visibility" takes the div out of its place } .nav { display: flex; justify-content: center; align-items: center; height:160px; border:1px solid black; text-align: center; } .dropdownContainer { margin-left: auto; } #drop { display:none; /* visibility:hidden;*/ } #menu{ display: block; position: absolute; height: 60px; overflow-y: auto; width: 80px; } <nav class="nav"> <div>Irrelevant elements to this question</div> <div class="dropdownContainer"> <button onclick="dropdown()" class="dropdownBtn">Ronaldinho</button> <div id="menu"> <!-- the more items added here, the more up the page the whole container goes --> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> </div> </div> </nav>