Элемент позиции внутри Другой элемент JAVAscript

Как вы можете создать элемент внутри другого элемента и отрегулировать положение по классу? Я создал 3 div s по коду, а затем создал 1 div имя div_img внутри div2. Теперь я должен отрегулировать положение div_img по его классу. Когда мы пишем top : 0 или right:0 в классе div_calss_img_calss, мы имеем в виду положение от 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

ответ

Смежные вопросы