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

Question

我怎样才能将图片放在所有其他 DIV 盒子上并像图片上的小 Git 一样正确放置？

Image with image on image

Answer 1

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

Answer 2

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

例如；

#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.

Answer 3

您需要使用一些东西：

CSS定位，你需要设置为absolute或relative定位才能实现。 relative 定位将元素相对于其父元素定位 - 而 absolute 定位将元素定位在页面上的确切指定位置
CSS Z-indexing，您需要确保图像元素具有更高的 z-index您试图将其定位的元素。

另一件需要注意的事情是 z-index 只影响位置不是 static 的元素，因此如果您遇到问题，请确保元素设置了非静态位置.

以下是一些链接：

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

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

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

How to put images over other boxes?

html

css

position

image

display