Q:

Element position inside Another element JAVAscript

How can you create an element within another element and adjust the position by class? I created 3 divs by code and then I created one div name div_img inside div2.
I'm now required to adjust the position of div_img by its class. When we write top : 0 or right:0 in class div_calss_img_calss we mean the position from div2 not the main div.
Thank you so much.

function addElement2() {
  var element = document.getElementById("main");
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  var newContent = 0;
  for (var i = 1; i <= 3; i++) {
    newContent = newContent + 1;
    var divname = "div" + newContent;
    var divname2 = "div" + newContent;
    var Content_text = "newContent" + newContent;
    divname = document.createElement("div");
    document.getElementById("main").appendChild(divname);
    Content_text = document.createTextNode(divname2);
    divname.id = divname2.toString().trim();
    divname.appendChild(Content_text);

  }

  function addElement3() {
    var imgg1 = document.createElement("div");
    document.getElementById("div2").appendChild(imgg1);
    imgg1.id = "div_img";
    imgg1.className = "div_calss_img_calss";
    Content_text = document.createTextNode("I must be inside div2 TOP:O right:0");
    imgg1.appendChild(Content_text);
  }
}
body {
  text-align: center;
}
#main {
  position: absolute;
  height: 400px;
  width: 600px;
  border: 1px solid black;
  left: 400px;
}
#btn1 {
  position: absolute;
  height: 30px;
  width: 200px;
  border: 1px solid black;
  left: 500px;
  top: 420px;
}
#btn2 {
  position: absolute;
  height: 30px;
  width: 200px;
  border: 1px solid black;
  left: 800px;
  top: 420px;
}
#div1 {
  height: 100px;
  width: 100%;
  background-color: #FF3399;
}
#div2 {
  height: 100px;
  width: 100%;
  background-color: #99FF00;
}
#div3 {
  height: 100px;
  width: 100%;
  background-color: #00CC99;
}
.div_calss_img_calss {
  position: absolute;
  height: 80px;
  width: 80px;
  border: 1px solid black;
  right: 0px;
  top: 0px;
  background-color: #FFFF00;
}
<div id="main"></div>
<button id="btn1" onclick="addElement2()">1-Create 3 divs</button>
<button id="btn2" onclick="addElement3()">2-Create one div inside div2</button>

A:

Your #div2 must have position:relative; so it's child with position:absolute; (#div_img) will be positioned relative to it's parent (#div2).

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Hello!</title>
<style type="text/css">
  <!-- body {
    text-align: center;
  }
  #main {
    position: absolute;
    height: 400px;
    width: 600px;
    border: 1px solid black;
    left: 400px;
  }
  #btn1 {
    position: absolute;
    height: 30px;
    width: 200px;
    border: 1px solid black;
    left: 500px;
    top: 420px;
  }
  #btn2 {
    position: absolute;
    height: 30px;
    width: 200px;
    border: 1px solid black;
    left: 800px;
    top: 420px;
  }
  #div1 {
    height: 100px;
    width: 100%;
    background-color: #FF3399;
  }
  #div2 {
    height: 100px;
    width: 100%;
    background-color: #99FF00;
    position:relative;
  }
  #div3 {
    height: 100px;
    width: 100%;
    background-color: #00CC99;
  }
  .div_calss_img_calss {
    position: absolute;
    height: 80px;
    width: 80px;
    border: 1px solid black;
    right: 0px;
    top: 0px;
    background-color: #FFFF00;
  }
  -->
</style>
<script>
  function addElement2() {

    var element = document.getElementById("main");
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }

    var newContent = 0;


    for (var i = 1; i <= 3; i++) {


      newContent = newContent + 1;

      var divname = "div" + newContent;
      var divname2 = "div" + newContent;
      var Content_text = "newContent" + newContent;


      divname = document.createElement("div");
      document.getElementById("main").appendChild(divname);
      Content_text = document.createTextNode(divname2);

      divname.id = divname2.toString().trim();
      divname.appendChild(Content_text);
    }
  }


  function addElement3() {

    var imgg1 = document.createElement("div");

    document.getElementById("div2").appendChild(imgg1);

    imgg1.id = "div_img";

    imgg1.className = "div_calss_img_calss";
    Content_text = document.createTextNode("I must be inside div2 TOP:O right:0");
    imgg1.appendChild(Content_text);

  }
</script>
</head>

<body>
  <div id="main"></div>
  <button id="btn1" onclick="addElement2()">1-Create 3 divs</button>
  <button id="btn2" onclick="addElement3()">2-Create one div inside div2</button>
</body>

</html>

