html - 将 div 放在 slider 的底部

Question

我制作了这个 slider ，我希望图像能够响应并且 text-holder 始终位于 slider 的底部(就像覆盖层一样)。我尝试了很多组合，但找不到合适的组合。如果我为 .text-holder 设置 margin-top 或为图像设置 height 它没有响应。

HTML

<div id="slider-container">
  <div class="slider">
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2017/12/09/16/41/snow-man-3008179_960_720.jpg" >
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2015/12/12/22/35/snowman-1090261_960_720.jpg" >
    <img class="slider-photo" src="https://cdn.pixabay.com/photo/2014/04/05/11/38/christmas-316448_960_720.jpg" >
  </div>
  <div class="text-holder">
    <p>This is some text</p>
    <p>I want to be on the bottom of the slider</p>
  </div>
</div>

CSS

$slides: 3;
$time_per_slide: 4;
$total_animation_time: $time_per_slide * $slides;

.slider-container {
  display: flex;
}

.slider {
  overflow: hidden;
  background-color: black;
}
.slider-photo {
  position:absolute;
  z-index: -1;
  animation: round #{$total_animation_time}s infinite;
  opacity: 0;
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@for $index from 1 to $slides + 1 {
  img:nth-child(#{$index}) {
    animation-delay: #{$total_animation_time - $time_per_slide * $index}s;
  }
}
.text-holder {
  background: rgba(255, 0, 0, 0.4);
  padding: 20px 10px;
  width: 100%;
}

那些是大图像，它们将覆盖整个屏幕宽度，这是我尝试用较小图像制作的笔 https://codepen.io/al-josh/pen/VybWWg

Answer 1

这是工作演示:https://codepen.io/d3vma/pen/QavgPg

您使用的是 .slider-container 而不是 #slider-container 并且这应该是相对于绝对容器的容器(.text-持有人)