html - 使出现在多个图像上 HTML/CSS

Question

当我尝试在多张图片上放置文字时，它只出现在第一张图片上，因此只是重叠。我不确定为什么要这样做。我是使用 HTML/CSS 的初学者。演示可在 https://jsfiddle.net/mt4wc8xL/ 获得.只出现“文本二”而不出现“文本一”

HTML:

    <div class="container">
        <div class="thumbnail">
            <div class="movie">
                <a href="http://google.ca">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="dark knight"/>
                    <span class="text">The Dark Knight</span>
                </a>
            </div>
            <div class="movie">
                <a href="http://google.ca">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="shutter island"/>
                    <span class="text">The Dark Knight</span>
                </a>
            </div>
        </div>
    </div>

CSS:

  .container {
    background: white;
    position: absolute;
    height: 19em;
    width: 45em;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

img {
  max-width: 100%;
}

.spacing{
  position: absolute;
  top: 1em;
  left: 1em;
  width: 225px;
  height: 220px;
}

.movie{
  width: 100%;
  height: 100%;
  display: inline-block;
}

.text{
  position: absolute;
  bottom: -3em;
  left: 0;
  display: inline-block;
  padding: 15px 5px 5px;
  width: 170px;
  color: white;
  font-size: 15px;
  text-shadow: rgba(0,0,0,0.5) 1px 1px 0;
  font-family: sans-serif;

  background-color: black;
  background-position: left-bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Answer 1

position: absolute 修复到最近的具有 position: relative

的祖先

.movie{
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative; /* add this */
}

https://jsfiddle.net/mt4wc8xL/3/