如何将图像放在其他盒子上？答案

【问题标题】：How to put images over other boxes?如何将图像放在其他盒子上？
【发布时间】：2020-05-23 03:43:31
【问题描述】：

如何将图片放在所有其他 DIV 框上，并将其放置在图片上的小 Git 上？

Image with image on image

【问题讨论】：

能否请您详细解释一下您的问题。
您应该添加您尝试获得帮助的代码/

标签： html css image position display

【解决方案1】：

您可以将图像的位置设置为相对，然后将其向下推以创建重叠。

例如;

#container {
background-color: red;
}

#image {
position: relative;
top: 30px;
}

#text {
background-color: green;
}

<div id="container">

<div id="image">
<img src="https://picsum.photos/100/100">
</div>

<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

从我的示例中可以看出，图像与文本框重叠。

因此，在您的情况下，您可以获得准确的图像并相应地向下推。

如果您在同一行上有多个图像，也许您可以考虑将 #container 设置为 parent，然后将所有图像和文本设置为 children.

【讨论】：

非常感谢！ :)

【解决方案2】：

尝试更改每张图片的 z 顺序。

【讨论】：

【解决方案3】：

您需要使用一些东西：

CSS 定位，您需要设置为absolute 或relative 定位来实现此目的。 relative 定位将元素相对于其父元素进行定位 - 而 absolute 定位会将元素定位在页面上精确指定的位置
CSS Z-indexing，您需要确保图像元素的 z-index 比您尝试定位的元素更高。

另外需要注意的是z-index 只影响位置不是static 的元素，因此如果您遇到问题，请确保元素具有非静态位置集。

这里有一些链接：

Z-index：https://css-tricks.com/almanac/properties/z/z-index/

职位：https://css-tricks.com/almanac/properties/p/position/

【讨论】：