Tengo 3 cuadrados concéntricos. Quiero agregar una ecuación simple y pedir X en la parte superior del cuadrado exterior (clase div "abuelo") "Ingrese el valor de x:". Me gustaría que el resultado se expresara en el cuadrado central (hijo) dentro de los cuadrados abuelo y padre. Pero no puedo hacer que el texto en el cuadrado exterior se alinee en la parte superior y también cuando agrego el texto al cuadrado exterior, cubre los otros cuadrados del interior. Intenté jugar con z-index pero no funciona :/, solo puedo ver el cuadrado exterior rojo Traté de hacer un fragmento ejecutable pero no lo inserta aquí después de ejecutarlo. Así que les dejo este enlace. https://jsfiddle.net/olbapnairda/5d9boreL/3/
var x = window.prompt("Enter a value of X "); var square = x => x * x console.log("The value of square is: " + square(x)); document.querySelector(".grandparent").innerHTML = x; document.querySelector(".child").innerHTML = square(x); body { margin: 0; min-height: 100vh; } body, div { display: flex; justify-content: center; align-items: center; } .grandparent { width: 200px; height: 200px; background-color: red; align-items: top; z-index=0; } .parent { width: 130px; height: 130px; background-color: blue; } .child { width: 60px; height: 60px; background-color: green; z-index: 1; } <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>Creo que esto es lo que estás buscando.
Su código anulaba el HTML interno y, por lo tanto, eliminaba los divs principal y secundario, así que intentemos algo un poco diferente:
var square = x => x * x function myFunction() { let item = document.getElementById("xinput").value; console.log(item); document.getElementById("child").innerHTML = square(item); } body { margin: 0; min-height: 100vh; } body, div { display: flex; justify-content: center; align-items: center; } .grandparent { padding:10px; display: block; justify-content: center; align-items: center; width: 200px; height: 220px; background-color: red; z-index = 0; position: relative; } .parent { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; background-color: blue; } .child { width: 60px; height: 60px; background-color: green; z-index: 1; } #x { margin: auto; display: block; width: 130px; } #xinput { display: block; text-align: center; width:90%; padding: 5px; } button { display: block; padding: 5px; width: 100%; } <div class="grandparent"> <div id="x"> <input id="xinput" placeholder="value of x" > <button onClick="myFunction()">submit</button> </div> <div class="parent"> <div id="child" class="child"></div> </div> </div>