html - css 图像覆盖文本

Question

你可能会认为这个问题是重复的，但请先检查jsffiddle以确保它不是

通常，我只是将图像向右或向左浮动，文本会向左或向右浮动，当我只在图像上时效果很好。但在这种情况下，我在一个 div 的 Angular 上有四个图像。我不希望文本位于图像的左侧和右侧，但我确实希望文本不被隐藏。

我的意思是，在当前情况下，文本从图像下方开始，这是我想要修复的。

我尝试过的

我试着在图像上左右浮动，并给 .box2 类一个清晰的:两者

JSFIDDLe http://jsfiddle.net/EL5n9/

Answer 1

因为你所有的图像都是绝对定位的，你可以给 box2 div 一个 position: relative 然后也给 box2 z-index: 1。

简而言之:添加:

z-index:1;
position: relative;

到框 2。

解释:当元素不是静态定位时(所有 DOM 元素的默认设置为 position: static)，您可以使用它们的 z-index。这表示此元素所在的“级别”或“图层”(如在 Photoshop 图层中)。 z-index 的默认值为 0。因此，将文本框放在更高的“层”中，使其呈现在其他层之上(图像，默认设置为 z-index: 0)。

希望这有帮助:)