创建的图像元素未放置在div内的正确位置

Question

我有一个包含一些div元素的HTML，例如：

<body id="theBody">

  <div id="box1">
    <div id="boxLeft"></div>
    <div id="boxRight"></div>
  </div>
  ...

在JavaScript代码中，我做这样的事情：

var theLeftSide = document.getElementById("boxLeft");

newImg = document.createElement("img");
newImg.src = "image1.png";
topPos = 200;
leftPos = 200;
newImg.style.top = topPos + "px"; 
newImg.style.left = leftPos + "px"; 
newImg.setAttribute("width",  "60px");
theLeftSide.appendChild(newImg);

我希望该图像显示在boxLeft内的（200，200）的正确位置，但是它显示在页面的左上角。

我在这里做错了什么？

我对此表示感谢。

Answer 1

您需要对图像应用绝对定位。

#boxLeft img {
    position: absolute;
}

或newImg.style.position= "absolute";

演示版

Answer 2

尝试添加此CSS：

#boxLeft{
    position: relative;
}

img{
    position: absolute;
}

创建的图像元素未放置在div内的正确位置

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-04-08 15:07:42

解决方案2
2 2016-04-08 15:09:30

创建的图像元素未放置在div内的正确位置

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-04-08 15:07:42

解决方案2 2 2016-04-08 15:09:30

解决方案1
3 已采纳 2016-04-08 15:07:42

解决方案2
2 2016-04-08 15:09:30