如何使用像素将元素附加到页面的特定区域

【问题标题】：How can I append an element to a specific area of the page using pixels如何使用像素将元素附加到页面的特定区域
【发布时间】：2019-08-16 21:52:27
【问题描述】：

我正在尝试将图像附加到页面的特定区域（中间）。目前，图像出现在我页面的最底部。谁能告诉我如何更改图像出现的位置？

    function picture(){
        var img = new Image();
        img.src = 'youwin.png';
        document.body.appendChild(img);
    }
} picture();

【问题讨论】：

【解决方案1】：

这可能是您 CSS 中 position: absolute 的一个很好的用例。我举了一个小例子，is this what you're looking to do?。

在我链接的示例中，我在图像周围包裹了一个 DIV，以便将图像放在中心更容易一些，但您也可以通过自己设置图像的样式来做到这一点。

image {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 5px;
}

使用left 和top 值来移动您的图像！

如果您希望图像居中，我认为最简单的方法是在图像周围包裹一个 DIV 并设置 div 的样式。试试text-align: center，就像我的例子一样。

当您查看如何设置 DIV 样式时，您甚至可以查看 flexbox 以获取一些选项！

【讨论】：