Если я изменю размеры моего экрана, мой текст падает внизу фонового изображения.вот HTML и CSS с уважением.Я искал и пытался возиться с позицией абсолютной / относительной, как рекомендовано, но текст все равно отваливается.Любая помощь будет оценена.
<div id="stage">
<a><%= image_tag "5.jpg" %></a>
<a><%= image_tag "6.jpg" %></a>
<a><%= image_tag "7.png" %></a>
<a><%= image_tag "8.jpg" %></a>
<div id="banner-saying">"On a hike, the days pass with
the wind, the sun, the stars; movement is powered by a
belly full of food and water, not a noxious tankful of
fossil fuels. On a hike, you're less a job title and more
a human being. A periodic hike not only stretches the
limbs but also reminds us: Wow, there's a big old world
out there."
</div>
</div>
#stage {
margin: 1em auto;
width: 100%;
height: 100vh;
margin-bottom: 230px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#stage a {
position: absolute;
width: inherit; /* Added */
height: inherit; /* Added */
}
#stage a img {
position: relative;
border: 1px solid #ccc;
background: #fff;
width: inherit; /* Added */
height: inherit; /* Added */
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 3s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
#banner-saying {
z-index: 100;
position: absolute;
color: white;
font-size: 14px;
left: 10px;
top: 770px;
font-family: "Reenie Beanie", "Comic Sans MS", cursive, sans-serif;
;}
Спасибо, что прочитали, если у вас так далеко.:)