如何在绝对背景图片下方创建内容

Question

我在 div 中创建了一些带有幻灯片的背景图片，上面显示了一些内容，现在我想在我的背景图片正下方添加一个部分，但我在背景之后添加的任何内容 div 在我的 html 中，位于我的背景图像后面和 window 的顶部，就好像我在本节之前的网页中没有创建任何内容，除了带有粘性位置的导航栏。我把我的代码放在这里是为了更好地理解。

我正在尝试在我的背景图片之后创建内容，作为我网页的不同、分离的部分，有人有想法吗？

P.S：我的主要关注点是运行全屏显示的网页 windows 所以请原谅我的混乱代码导致非全屏显示 windows。

*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: aqua;
}
header{
    z-index: 999999999;
    overflow: hidden;
    position: sticky;
    top: -31px;
}
header .header_main{
    background-color: rgba(255,255,255,0.98);
}
header div.header_meta{
     font-family: 'Open Sans', sans-serif;
     font-weight: bold;
     font-size: 11px;
     border-bottom: 1px solid rgba(224, 224, 224, 0.56);
 }
header div.container{
    line-height: 30px;
    width: 90%;
    margin: auto;
    padding: 0 50px;
}
header div.container nav ul{
    line-height: 30px;
    margin: 0 auto;
    float: right;
}
header div.container nav ul li{
    float: right;
    list-style: none;
}
header div.container nav ul li a{
    text-decoration: none;
    float: right;
    padding: 0 10px;
    color: #ffffff;
}
header div.container nav ul li a:hover{
    text-decoration: underline;
    color: #E6E6E6;
}
header .header_meta .header_contact{
    margin: auto;
    line-height: 30px;
    color: #ffffff;
}header .header_main{
    box-shadow: 0 3px 4px -4px rgba(138, 138, 138, 0.65);
}
header .header_main .container_logo_nav{
    width: 90%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    padding: 0 4%;
}
header .header_main .container_logo_nav img{
    height: 100%;
    width: 216px;
    float: left;
}
header .header_main .container_logo_nav ul{
    float: right;
    padding-right: 1%;
}
header .header_main .container_logo_nav ul li{
    float: right;
    list-style: none;
}
header .header_main .container_logo_nav ul li a{
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
    font-size: 14px;
    color: #6E6E6E;
    padding: 0 13px;
    transition: 300ms;
}
header .header_main .container_logo_nav ul li a.search{
    font-size: 11px;
}
header .header_main .container_logo_nav ul li a:hover{
    color: #000000;
}
 .container_slider{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82vh;
    animation: animate 35s ease-in-out infinite;
    background-size: cover;
    background: no-repeat center;
    clear: both;
    display: block;
}
.container_slider::before{
    width: 100%;
    height: 100%;
    content:"";
    background-color: rgba(22,22,22,0.2);
    position: absolute;
    top: 0;
}
@keyframes animate{
    0%,100%{
        background-image: url("Background_Image1");
    }
    20%{
        background-image: url("Background_Image2");
    }
    40%{
        background-image: url("Background_Image3");
    }
    60%{
        background-image: url("Background_Image4");
    }
    80%{
        background-image: url("Background_Image5");
    }
}
.container_slider .outer{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
}
.container_slider .outer .details{
}
.container_slider .outer .details h1{
    font-family: 'Finger Paint', cursive;
    font-weight: lighter;
    color: #ffffff;
    font-size: 70px;
    line-height: 77px;
    padding: 15px 0;
    animation: caption 600ms ease-in-out 1;
}
@keyframes caption {
    0%{
        transform: translate(0, -20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .details span{
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    display: block;
    animation: ltlspan 600ms linear 1;
}
@keyframes ltlspan {
    0%{
        transform: translate(0, 20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .buttons{
    width: 100%;
    margin-top: 40px;
}
.container_slider .outer a{
    background-color: #f8f8f8;
    width: 152px;
    height: 46px;
    line-height: 23px;
    border-radius: 100px;
    padding: 10px 20px;
    margin: 0 10px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    transition: 300ms;
    color: #666666;
    animation: abuttons 1300ms ease-in 1;
}
@keyframes abuttons {
    0%{
        transform: translate(0, -20px);
        opacity: 0;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer a:first-child{
    background-color: #109bc5;
    color: #ffffff;
    border-bottom: 1px solid #0079a3;
}
.container_slider .outer a:first-child:hover{
    background-color: rgba(16, 156, 198, 0.9);
}
.container_slider .outer a:nth-child(2):hover{
    background-color: rgba(255, 255, 255, 0.86);
    color: black;
}
div.box{
    width: 100px;
    height: 100px;
    background-color: blue;
    /* I want this box to be displayed below my background image */
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
  <div class="header_meta">
    <div class="container">
      <nav>
        <ul>
          <li> <a href="#">Registration</a> </li>
          <li> <a href="#">Customer Login</a> </li>
        </ul>
      </nav>
      <div class="header_contact"> <span>Call us now: 555-147-5643</span> </div>
    </div>
  </div>
  <div class="header_main">
    <div class="container_logo_nav">
        <span class="logo"><a href="#"> <img src="images/logo-large.png" alt=""> </a> </span>
     <nav class="main_menu">
         <ul>
             <li><a class="search" href="#"><i class="fa fa-search"></i></a></li>
             <li><a href="#">News</a></li>
             <li><a href="#">Contact</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Deals</a></li>
             <li><a href="#">Destinations</a></li>
             <li><a href="#">Welcome</a></li>
         </ul>
     </nav>
    </div>
  </div>
</header>
    <div class="container_slider">
         <div class="outer">
             <div class="details">
                 <h1>To Travel is to live</h1>
                 <h2>
                     <span>Want to make a journey? We got the destinations!</span>
                 </h2>
             </div>
             <div class="buttons">
                 <a href="#">ALL DESTINATIONS</a>
                 <a href="#">LATEST OFFERS</a>
             </div>
         </div>
    </div>
<div class="box"></div>
</body>
</html>

Answer 1

您已将包装器设置为绝对定位和内部定位。我已将 .container_slider 更改为 relative 以正确包装您的滑块和框。

[screenshot of the result][1]

这里是截图：https://i.stack.imgur.com/8hTNT.jpg

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: aqua;
}
header {
    z-index: 999999999;
    overflow: hidden;
    position: sticky;
    top: -31px;
}
header .header_main {
    background-color: rgba(255, 255, 255, 0.98);
}
header div.header_meta {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 11px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.56);
}
header div.container {
    line-height: 30px;
    width: 90%;
    margin: auto;
    padding: 0 50px;
}
header div.container nav ul {
    line-height: 30px;
    margin: 0 auto;
    float: right;
}
header div.container nav ul li {
    float: right;
    list-style: none;
}
header div.container nav ul li a {
    text-decoration: none;
    float: right;
    padding: 0 10px;
    color: #ffffff;
}
header div.container nav ul li a:hover {
    text-decoration: underline;
    color: #e6e6e6;
}
header .header_meta .header_contact {
    margin: auto;
    line-height: 30px;
    color: #ffffff;
}
header .header_main {
    box-shadow: 0 3px 4px -4px rgba(138, 138, 138, 0.65);
}
header .header_main .container_logo_nav {
    width: 90%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    padding: 0 4%;
}
header .header_main .container_logo_nav img {
    height: 100%;
    width: 216px;
    float: left;
}
header .header_main .container_logo_nav ul {
    float: right;
    padding-right: 1%;
}
header .header_main .container_logo_nav ul li {
    float: right;
    list-style: none;
}
header .header_main .container_logo_nav ul li a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
    font-size: 14px;
    color: #6e6e6e;
    padding: 0 13px;
    transition: 300ms;
}
header .header_main .container_logo_nav ul li a.search {
    font-size: 11px;
}
header .header_main .container_logo_nav ul li a:hover {
    color: #000000;
}
.container_slider {
    position: relative; /*changed to relative*/
    top: 0;
    left: 0;
    width: 100%;
    height: 82vh;
    animation: animate 35s ease-in-out infinite;
    background-size: cover;
    background: no-repeat center;
    clear: both;
    display: block;
}
.container_slider::before {
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(22, 22, 22, 0.2);
    position: absolute;
    top: 0;
}
@keyframes animate {
    0%,
    100% {
        background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
    }
    20% {
        background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
    }
    40% {
        background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
    }
    60% {
        background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
    }
    80% {
        background-image: url('https://www.pexels.com/photo/green-leaf-plant-808510/');
    }
}
.container_slider .outer {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.container_slider .outer .details {
}
.container_slider .outer .details h1 {
    font-family: 'Finger Paint', cursive;
    font-weight: lighter;
    color: #ffffff;
    font-size: 70px;
    line-height: 77px;
    padding: 15px 0;
    animation: caption 600ms ease-in-out 1;
}
@keyframes caption {
    0% {
        transform: translate(0, -20px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .details span {
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    display: block;
    animation: ltlspan 600ms linear 1;
}
@keyframes ltlspan {
    0% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer .buttons {
    width: 100%;
    margin-top: 40px;
}
.container_slider .outer a {
    background-color: #f8f8f8;
    width: 152px;
    height: 46px;
    line-height: 23px;
    border-radius: 100px;
    padding: 10px 20px;
    margin: 0 10px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    transition: 300ms;
    color: #666666;
    animation: abuttons 1300ms ease-in 1;
}
@keyframes abuttons {
    0% {
        transform: translate(0, -20px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.container_slider .outer a:first-child {
    background-color: #109bc5;
    color: #ffffff;
    border-bottom: 1px solid #0079a3;
}
.container_slider .outer a:first-child:hover {
    background-color: rgba(16, 156, 198, 0.9);
}
.container_slider .outer a:nth-child(2):hover {
    background-color: rgba(255, 255, 255, 0.86);
    color: black;
}
div.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* I want this box to be displayed below my background image */
}

如何在绝对背景图片下方创建内容

How to create content just below an absolute background image

html

css

position

background-image