英雄部分与CSS幻灯片，定位为航向和正常流动？

Question

我试图用CSS动画创建一个带有幻灯片的Hero/Jumbotron。然而，到目前为止，我所得到的却扰乱了正常的流动。

我在幻灯片之后添加的任何内容都位于顶部/下方，移除.pic-wrapper部分的.pic-wrapper，使得.pic-wrapper占据了整个身体。

我需要的是英雄部分有一个标题为中心，然后为网站的其余部分遵循的正常。有什么帮助吗？

<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索引是你的朋友。您可以通过添加包装器、文本中心等来抛光它。

​

#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

我认为您应该简单地将.pic-wrapper的.pic-wrapper设置更改为relative，从而将其放入流中。我认为没有理由设置absolute。

另外，您应该添加一个height设置，而不仅仅是min-height。您可以使用height代替min-height，也可以使用height: 50vh和固定的px值来表示“最小高度”。