Question

如何在另一个元素中创建元素并按类调整位置？我按代码创建了3个div，然后在div内创建了一个div_img名称div2。我现在需要按类别调整div_img的位置。当我们在课程top : 0中写right:0或div_calss_img_calss时，我们指的是div2而不是主div的位置。

非常感谢你。

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>

Answer 1

您的#div2必须position:relative;，因此position:absolute;（#div_img）的孩子将相对于其父级（#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>

Answer 2

添加位置：相对; 到＃div2

Answer 3

如果使用绝对位置，则可以使用父标记的相对位置。

<!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>

元素位置里面有另一个元素JAVAscript

3 个答案: