Элемент изображения не установлен правильно внутри div

Я пытаюсь разместить img в div в определенном месте (200, 100), но он всегда позиционируется в верхнем левом углу (0, 0). Что я делаю не так?Элемент изображения не установлен правильно внутри div

<!doctype html> 
<html> 
<head> 
    <title>Matching Game</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
</head> 
<body id="theBody" onload="build_set()"> 
    <h1>Matching Game</h1> 
    <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div> 
    <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div> 
    <script> 
     function build_set() { 
      var leftSide = document.getElementById("leftSide"); 
      var rightSide = document.getElementById("rightSide"); 
      var smile = document.createElement("img"); 
      smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png") 
      smile.style.top = "200px"; 
      smile.style.left = "100px"; 
      leftSide.appendChild(smile); 
     } 
    </script> 
</body> 
</html>

источник

2016-01-21 swissfritz

Ваше изображение не абсолютно позиционирован, поэтому left и top будут игнорироваться.

Добавьте следующие строки в JavaScript:

smile.style.position = 'absolute';

Вот jsFiddle рабочей версии.

источник

2016-01-21 10:56:21 toomanyredirects

Для img также необходимо установить position. Вот jsFiddle

 function build_set() { 
 
      var leftSide = document.getElementById("leftSide"); 
 
      var rightSide = document.getElementById("rightSide"); 
 
      var smile = document.createElement("img"); 
 
      smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png") 
 
      smile.style.top = "200px"; 
 
      smile.style.left = "100px"; 
 
      smile.style.position = "absolute"; 
 
      leftSide.appendChild(smile); 
 
     } 
 
     build_set();

<h1>Matching Game</h1> 
 
    <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div> 
 
    <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div>

источник

2016-01-21 10:54:38 Gvidas

Большое спасибо за быстрый ответ! – swissfritz

Элемент изображения не установлен правильно внутри div

ответ

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