将figcaption始终显示在其他数字上（z-index）

Question

我有多个绝对定位的图像，其中一些可能会重叠。有些图片有标题。

<div id="entry1" class="entry" title="foo" style="position:absolute; top: 75px; left: 50px; z-index: 2;">
  <figure>
  <figcaption style="background-color:#FFFFFF;">Foo</figcaption>
	<img src="img1.png">
  </figure>
</div>
<div id="entry2" class="entry" title="Bar" style="position:absolute; top: 50px; left: 50px; z-index: 2;">
  <figure>
  <figcaption style="background-color:#FFFFFF;">Bar</figcaption>
	<img src="img2.png">
  </figure>
</div>

哪个标题位于哪个标题之上或哪个图像位于哪个图像之上并不重要。但是，我希望所有的figcaptions总是在图像上方（就z-index而言），因此它们是可读的。

我怎样才能做到这一点？

Answer 1

如果您绝对定位这些项目，可以使用CSS z-index来堆叠它们。

这将告诉浏览器您希望项目图层在页面上显示的顺序，较高的数字将放置在上图层的值较低的z-index。