用文本覆盖<div>

Question

我需要能够在div上显示价格标签。

像这样

我确信它与z索引和定位有关。

Answer 1

也许你可以重新考虑你的结构并使用flex属性。

你可以看到下面的代码片段（or breakable into 2 rows of three）

div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1em 3em;
  background: tomato;
}
figure {
  position: relative;
  display: table;
  height: 50px;
  width: 100px;
  margin: 2em;
}
figure img {
  position: absolute;
  transform:rotate(-10deg);
}
figcaption {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: white;
  position: relative;
}

<div>
  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>
</div>

认为：没有CSS我必须能够理解它是什么...你做了单独的图像和价格，而不是一个非常好的主意;）

Answer 2

您尚未正确关闭第一个价格span。你错过了一个角色，因此它认为它没有关闭，所以你的嵌套搞砸了。关闭它，宽度应该固定。

至于其余部分，我不确定你的目标是什么