<div class="content">
  <div class="buttons">
        <button class="button" onclick="positionStatic()">static</button>
  <button class="button" onclick="positionAbsolute()">absolute</button>  
    <button class="button" onclick="positionFixed()">fixed</button>  
    <button class="button" onclick="positionRelative()">relative</button>  
  </div>
<div id="square-container">
  <div class="text">Square</div>
</div>
 <div id="square-container2">
  <div class="text2">Square2</div>
</div>
   <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>

body {
  display: flex;
  justify-content: center;
  height: 150vh;
  align-items: center;
  overflow-x: hidden;
}

.content {
  position: relative;
  width: 400px;
  height: 400px;
  border: 5px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

#square-container {
  position: relative;
  width:100px;
  height: 100px;
  background-color: #2a9d8f;
  z-index:1;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100px;
  height:100px;
}

.buttons {
  left:-40%;
  top:42%;
  position: absolute;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 100px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 100%;
  left:110%;
  top:40%;
}

#square-container2 {
  position: relative;
  width:100px;
  height: 100px;
  background-color: #e76f51;
}

.text2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100px;
  height:100px;
}

function positionStatic() {
  document.getElementById("square-container").style.position= "static"
  
  var x = document.getElementById("code");
  if (x.innerHTML === "position: static;") {
    x.innerHTML = "position: static;";
  } else {
    x.innerHTML = "position: static;";
  }
}

function positionAbsolute() {
  document.getElementById("square-container").style.position= "absolute"
  
  var x = document.getElementById("code");
  if (x.innerHTML === "position: absolute;") {
    x.innerHTML = "position: absolute;";
  } else {
    x.innerHTML = "position: absolute;";
  }
}

function positionFixed() {
  document.getElementById("square-container").style.position= "fixed"
  
  var x = document.getElementById("code");
  if (x.innerHTML === "position: fixed;") {
    x.innerHTML = "position: fixed;";
  } else {
    x.innerHTML = "position: fixed; (scroll down to see the effect)";
  }
}

function positionRelative() {
  document.getElementById("square-container").style.position= "relative"
  
  var x = document.getElementById("code");
  if (x.innerHTML === "position: relative;") {
    x.innerHTML = "position: relative;";
  } else {
    x.innerHTML = "position: relative;";
  }
}