元素在另一个元素内的位置JAVAscript
[英]Element position inside Another element JAVAscript
问题描述
如何在另一个元素中创建一个元素并按类调整位置？ 我通过代码创建了3个div ，然后在div2创建了一个div名称div_img 。 现在，我需要按其类调整div_img的位置。 当我们在div_calss_img_calss类中编写top : 0或right:0 ，是指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>
3 个解决方案
解决方案1
1 已采纳 2016-04-29 12:36:50
您的#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>
解决方案2
1 2016-04-29 12:37:38
添加位置：相对； 到＃div2
解决方案3
0 2016-04-29 12:37:28
如果使用绝对位置，则可以将相对位置用于父标记。
<!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>
如何使用jQuery获取元素在另一个元素内的位置？
[英]How to get the position of an element inside another element using jQuery?
Javascript /根据另一个元素的位置定位元素
[英]Javascript / Positioning an element according to another element's position
在另一个元素中找到一个html，然后使用Javascript单击它
[英]Find a html inside another element and then click it with Javascript
如何用JavaScript创建一个元素，给它一个ID，然后在其中创建另一个元素？
[英]How to create an element with JavaScript, give it an ID, then create another element inside of it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.