html - 用文本覆盖

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，我一定能够理解它是关于什么的……你把图片和价格分开了，这不是一个好主意；)