Element position inside Another element JAVAscript
Question
How can you create an element within another element and adjust the position by class? I created 3 div s 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>
3 answers
solution1
1 ACCPTED 2016-04-29 12:36:50
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>
solution2
1 2016-04-29 12:37:38
Add position:relative; to #div2
solution3
0 2016-04-29 12:37:28
If you use position absolute, then you can use the position relative for the parent tag.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
get html element inside another element in javascript
Accessing an element inside another element JavaScript data
Position spinner in the middle of another element (javascript)
How to get the position of an element inside another element using jQuery?
Javascript / Positioning an element according to another element's position
Add class inside another element via javascript?
Find a html inside another element and then click it with Javascript
position element to the right of another
How to position the element at the same position as another element?
How to create an element with JavaScript, give it an ID, then create another element inside of it?
Related Tags