如何将图像放在其他框上?

Question

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

图像与图像上的图像

Answer 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设置为父图像，然后将所有图像和文本设置为子图像。

Answer 2

尝试更改每个图像的 z 顺序。

Answer 3

您需要使用一些东西：

• CSS定位，您需要设置为absolute或relative定位来实现此目的。相对定位将相对于元素的父元素定位元素 - 而绝对定位会将元素定位在页面上的精确指定位置
• CSS Z 索引，您需要确保图像元素的z 索引高于您尝试定位它的元素。

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

以下是一些链接：

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

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