divをスライダの一番下に置く

Question

私はこのスライダを作ったので、画像は応答し、text-holderは常にスライダの下に（オーバーレイのように）したいと思っています。私は多くの組み合わせを試みたが、私は正しいものを見つけることができない。 .text-holderまたはheightの画像をmargin-topに設定すると、画像は反応しません。

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を使用していて、これはコンテナに相対ボックス

Answer 2

$slides: 3; 
$time_per_slide: 4; 
$total_animation_time: 
$time_per_slide * $slides; 
#slider-container { display: flex; position:relative;} 
.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 {position:absolute; 
bottom:0; background: rgba(255, 0, 0, 0.4); 
padding: 20px 10px; width: 100%; 
}