Раздел героя со слайд-шоу CSS, позиционирование для курса и нормального потока

Question

Я пытаюсь создать Hero / Jumbotron с помощью слайд-шоу, используя CSS анимацию. Однако то, что у меня есть, нарушает нормальный поток.

Все, что я добавляю после слайд-шоу, расположено сверху / снизу, а удаление position: absolute из секции .pic-wrapper приводит к тому, что .pic-wrapper занимает все тело.

Мне нужно, чтобы раздел героя располагался по центру заголовка, а затем остальная часть сайта выполнялась как обычно. Любая помощь?

HTML

<section class="pic-wrapper">
    <h1>Slideshow Heading, should be on top of slideshow</h1>
    <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
</section>
<section>
<h2>New Section, this currently ends up under the slideshow</h2>
</section>

CSS

.pic-wrapper {
        position: absolute;
        width: 100%;
        min-height: 50vh;
        /* overflow: hidden; */
        }

        figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;

        /*animation*/
        animation: slideShow 24s linear infinite 0s;
        -o-animation: slideShow 24s linear infinite 0s;
        -moz-animation: slideShow 24s linear infinite 0s;
        -webkit-animation: slideShow 24s linear infinite 0s;
        }

        .pic-1 {
        opacity: 1;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-2 {
        animation-delay: 6s;
        -o-animation-delay: 6s;
        -moz--animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-3 {
        animation-delay: 12s;
        -o-animation-delay: 12s;
        -moz--animation-delay: 12s;
        -webkit-animation-delay: 12s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }

        .pic-4 {
        animation-delay: 18s;
        -o-animation-delay: 18s;
        -moz--animation-delay: 18s;
        -webkit-animation-delay: 18s;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position-y: 50%;
        }
        /* keyframes*/

        @keyframes 
        slideShow {  0% {
        opacity: 0;
        transform:scale(1);
        -ms-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        transform:scale(1.1);
        -ms-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        transform:scale(1);
        -ms-transformm:scale(1);
        }
        }
        @-o-keyframes 
        slideShow {  0% {
        opacity: 0;
        -o-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -o-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -o-transformm:scale(1);
        }
        }
        @-moz-keyframes 
        slideShow {  0% {
        opacity: 0;
        -moz-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -moz-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -moz-transformm:scale(1);
        }
        }
        @-webkit-keyframes 
        slideShow {  0% {
        opacity: 0;
        -webkit-transform:scale(1);
        }
        5% {
        opacity: 1
        }
        25% {
        opacity: 1;
        }
        30% {
        opacity: 0;
        -webkit-transform:scale(1.1);
        }
        100% {
        opacity: 0;
        -webkit-transformm:scale(1);
        }
        }

Ссылка Codepen

Answer 1

z-index ваш друг. Как: Вы можете сделать это sh, добавив оболочку, текстовый центр и т. Д. c ...

#head {
     min-height: 50vh;
     overflow: hidden;
     position: relative;
}
.pic-wrapper {
     position: absolute;
     width: 100%;
     min-height: 50vh;
     overflow: hidden;
}
/* added this */
 #hero {
     z-index: 20;
     position: absolute;
     width: 100%;
     padding: 2vw;
     text-align: center;
     text-size: 200% 
}
figure {
    /* and this */
     z-index: 1;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
    /*animation*/
     animation: slideShow 24s linear infinite 0s;
     -o-animation: slideShow 24s linear infinite 0s;
     -moz-animation: slideShow 24s linear infinite 0s;
     -webkit-animation: slideShow 24s linear infinite 0s;
}
 .pic-1 {
     opacity: 1;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position-y: 50%;
}
 .pic-2 {
     animation-delay: 6s;
     -o-animation-delay: 6s;
     -moz--animation-delay: 6s;
     -webkit-animation-delay: 6s;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position-y: 50%;
}
 .pic-3 {
     animation-delay: 12s;
     -o-animation-delay: 12s;
     -moz--animation-delay: 12s;
     -webkit-animation-delay: 12s;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position-y: 50%;
}
 .pic-4 {
     animation-delay: 18s;
     -o-animation-delay: 18s;
     -moz--animation-delay: 18s;
     -webkit-animation-delay: 18s;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position-y: 50%;
}
/* keyframes*/
 @keyframes slideShow {
     0% {
         opacity: 0;
         transform:scale(1);
         -ms-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         transform:scale(1.1);
         -ms-transform:scale(1.1);
    }
     100% {
         opacity: 0;
         transform:scale(1);
         -ms-transformm:scale(1);
    }
}
 @-o-keyframes slideShow {
     0% {
         opacity: 0;
         -o-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -o-transform:scale(1.1);
    }
     100% {
         opacity: 0;
         -o-transformm:scale(1);
    }
}
 @-moz-keyframes slideShow {
     0% {
         opacity: 0;
         -moz-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -moz-transform:scale(1.1);
    }
     100% {
         opacity: 0;
         -moz-transformm:scale(1);
    }
}
 @-webkit-keyframes slideShow {
     0% {
         opacity: 0;
         -webkit-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -webkit-transform:scale(1.1);
    }
     100% {
         opacity: 0;
         -webkit-transformm:scale(1);
    }
}

<section id="head">
    <div class="pic-wrapper">
        <div id="hero">
            <h1>Slideshow Heading</h1></div>
        <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
        <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
    </div>
</section>

<section>
    <h2>New Section</2>
</section>

Answer 2

Я думаю, вам следует просто изменить настройку position с .pic-wrapper на relative, что приведет к ее изменению. Я не вижу причин для настройки absolute.

Кроме того, вы должны добавить настройку height, а не просто min-height. Вы можете использовать height вместо из min-height или использовать height: 50vh и фиксированное значение px для `min-height