元素内部位置另一个元素JAVAscript

如何在另一个元素中创建一个元素并按类调整位置？我通过代码创建了3 div，然后我创建了一个div名称div_img，内部为div2。我现在需要调整其班级的位置div_img。当我们在div_calss_img_calss中写top : 0或right:0时，我们表示div2的位置不是主要的div。元素内部位置另一个元素JAVAscript

非常感谢。

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>

来源

2016-04-29 TARIQ ALEED

非常感谢你，问题就解决了100％ –

你#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>

来源

2016-04-29 12:36:50 PinkTurtle

非常感谢你，问题就解决了100％ –

如果您使用的位置绝对的，那么你可以使用位置相对父标签。

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

来源

2016-04-29 12:37:28

非常感谢你，问题就解决了100％ –

添加位置：相对; 到＃DIV2

来源

2016-04-29 12:37:38

非常感谢你的问题被解决了100％ –

元素内部位置另一个元素JAVAscript

回答

相关问题