html - 如何将 figcaption 放在图像顶部

Question

我正在尝试将 figcaption 放在 img 的底部，这样它就在图像的“顶部”并且是透明的，因此图像可以通过.

不幸的是，我无法使它们具有相同的宽度(不知道为什么)或将 figcaption 放在图像的顶部。如果我使用负值 margin-top，它只会“隐藏”在图像下方。

我已经尝试了 z-index 和我能想到的所有其他方法，但到目前为止还没有成功。这是我的代码:

.floatImage {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  margin: 15px;
  margin-right: 0px;
  z-index: -1;
  width: 100%;
}

figure {
  width: 25%;
  float: right;
}

figcaption {
  background-color: rgba(79, 44, 16, 0.6);
  height: 1.2em;
  width: 100%;
  margin-top: -2.4em;
  float: right;
  text-align: center;
  color: white;
  z-index: 1;
  font-family: 'Open Sans', sans;
}

<figure>
  <img class="floatImage" src="img.png">
  <figcaption>Placeholder caption</figcaption>
</figure>

Answer 1

1. 要使 z-index 起作用，元素必须具有非静态位置，例如 relative 或 absolute。

2. 从 floatImage 中移除边距以保持宽度一致

结果:

.floatImage {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  z-index: -1;
  position: relative;
  width: 100%;
}

figure {
  width: 25%;
  float: right;
}

figcaption {
  background-color: rgba(79, 44, 16, 0.6);
  height: 1.2em;
  width: 100%;
  margin-top: -2.4em;
  float: right;
  text-align: center;
  color: white;
  z-index: 1;
  font-family: 'Open Sans', sans;
}

<figure>
  <img class="floatImage" src="http://placehold.it/300x400">
  <figcaption>Placeholder caption</figcaption>
</figure>

jsFiddle:https://jsfiddle.net/hey1ppd2/