Top align text inside a square-CodePudding

I have 3 concentric squares. I want to add a simple equation and asking for X in the top of the outer square (div class "grandparent") "Enter the value of x: ". The result I would like it expressed in the center (child) square inside the grandparent and parent squares. But I can't made the text in the outer square align in the top and also when adding the text to the outer square it covers the other squares inside. I tried playing with z-index but it doesn't work :/, I can only see the red outer square I tryed to make a runnable snippet but it doesn't insert it here after running it. So I leave this link. 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>

CodePudding user response：

Add:

<h6 class="input"></h6>

under grandparent div and Change:

 document.querySelector(".grandparent").innerHTML = x;

To:

 document.querySelector(".input").innerHTML = x;

Check out on this link

CodePudding user response：

I believe this is what you are looking for.

Your code was overriding the inner HTML and therefore deleting the parent and child divs, so let's try something a bit different:

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>