使用 HTML 和 CSS 在浮动图像列表项上添加文本？

Question

我想要一个向左浮动的项目列表 (ul/li)。每个项目都应包含一个图像（img 标签，无 css 背景。）我希望在这些图片上显示文字。

到目前为止，在我当前的测试版本中，此文本显示在页面左边框附近，而不是图像。

这是我当前的测试代码

<!DOCTYPE html>
<html>

<head>
  <style>
    <!-- I know that classes like list and listItem may seem redundant with tags but classes will be useful in final context. --> .list {
      list-style-type: none
    }
    .list .listItem {
      float: left;
      display: inline;
      margin: 0 5px 0 5px
    }
    .listItem img {
      z-index: 3
    }
    .listItem .title {
      position: absolute;
      left: 0;
      width: 100%;
      color: #f00;
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
  </ul>
</body>

</html>

这是一个 js fiddle： https://jsfiddle.net/24u81rgn/2/

Answer 1

我猜你忘了把 position: relative 放到 listItem 和 top:0 到 title。

让我知道你的反馈，干杯！

.list {
  list-style-type: none
}
.list .listItem {
  float: left;
  display: inline;
  margin: 0 5px 0 5px;
  position:relative;
}
.listItem img {
  z-index: 3;
}
.listItem .title {
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  color: #f00;
  margin: 5px;
}

<body>
  <ul class="list">
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
  </ul>
</body>

使用 HTML 和 CSS 在浮动图像列表项上添加文本？

Text over floating image list items using HTML and CSS?

html

css

list

css-position

css-float