Home > Enterprise >  I want to add a section under a video section but it doesn't align perfectly under the first se
I want to add a section under a video section but it doesn't align perfectly under the first se

Time：12-28

I am trying to include a section under a previous section but it doesn't show and align the way I want it to be. The first section is a text section with video background but the next section added doesn't show in the preview. Even in the stack overflow snippet the "about us" section is behind the video section. How can I solve this problem?

const menuToggle = document.querySelector('.toggle');
     const showcase = document.querySelector('.showcase');

     menuToggle.addEventListener('click', () => {
       menuToggle.classList.toggle('active');
       showcase.classList.toggle('active');
     })
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000000;
  transition: 0.5s;
  color: #ffff;
  z-index: 2;

}
.showcase.active
{
  right: 300px;
}



.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0394f4;
  mix-blend-mode: overlay;
  color: #001540;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 2.5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 5em;
  font-weight: 700;
  color: #64A8F0;
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}



.social
{
  position: absolute;
  z-index: 10;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}


.menu
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000026;

}
.menu ul
{
  position: relative;
}
.menu ul li
{
  list-style: none;
}
.menu ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #ffff;
}
.menu ul li a:hover
{
  color: #64A8F0;
}



.section{
    width: 100%;
    min-height: 100vh;
    background-color: #ddd;
}
.container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top: 100px;
}
.content-section{
    float: left;
    width: 55%;
}
.image-section{
    float: right;
    width: 40%;
}
.image-section img{
    width: 100%;
    height: auto;
}
.content-section .title{
    text-transform: uppercase;
    font-size: 28px;
}
.content-section .content h3{
    margin-top: 20px;
    color:#5d5d5d;
    font-size: 21px;
}
.content-section .content p{
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
.content-section .content .button{
    margin-top: 30px;
}
.content-section .content .button a{
    background-color: #3d3d3d;
    padding:12px 40px;
    text-decoration: none;
    color:#fff;
    font-size: 25px;
    letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
    background-color: #a52a2a;
    color:#fff;
}
.content-section .social{
    margin: 40px 40px;
}
.content-section .social i{
    color:#a52a2a;
    font-size: 30px;
    padding:0px 10px;
}
.content-section .social i:hover{
    color:#3d3d3d;
}
@media screen and (max-width: 768px){
    .container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top:50px;
}
.content-section{
    float:none;
    width:100%;
    display: block;
    margin:auto;
}
.image-section{
    float:none;
    width:100%;

}
.image-section img{
    width: 100%;
    height: auto;
    display: block;
    margin:auto;
}
.content-section .title{
    text-align: center;
    font-size: 19px;
}
.content-section .content .button{
    text-align: center;
}
.content-section .content .button a{
    padding:9px 30px;
}
.content-section .social{
    text-align: center;
}



@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 1.5em;
  }
  .text h3
  {
    font-size: 3em;
  }
<!DOCTYPE html>
<html lang="en" dir="ltr">

  <title>Think Tank</title>

</html>
<head>

</head>

<body>
  <style>
      @import url('styles.css');
  </style>

<section >

   <header>
     <h2 ></h2>
     <div ></div>
   </header>

   <video src="webasset.mov" muted loop autoplay></video>
   <div ></div>
   <div >
     <h2>Willkommen auf </h2>
     <h3>Think Tank</h3>
     <p>Beispiel.</p>
     <a href="#">THINK kaufen</a>
   </div>
   <ul >
     <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
     <li><a href="https://twitter.com/ThinkTank__?t=RxrP3KIpS8-L6UOfjpd7Ww&s=08"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
     <li><a href="https://www.instagram.com/think.tank.official/"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
   </ul>
 </section>
 <div >
   <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="section">Unser Token</a></li>
     <li><a href="#">NFT (COMING SOON)</a></li>
     <li><a href="#">Das Team</a></li>
     <li><a href="#">Kontakt</a></li>
   </ul>
 </div>


    <div >
        <div >
            <div >
                <div >
                    <h1>About Us</h1>
                </div>
                <div >
                    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.</p>
                    <div >
                        <a href="">Read More</a>
                    </div>
                </div>
                <div >
                    <a href=""><i ></i></a>
                    <a href=""><i ></i></a>
                    <a href=""><i ></i></a>
                </div>
            </div>
            <div >
                <img src="image/img one.jpg">
            </div>
        </div>
    </div>


         <!--===== MAIN JS =====-->
       <script src="main.js"></script>

</body>
</html>

CodePudding user response：

.showcase {
    position: relative;
 }

Replace the 'position:absolute' property to 'position:relative' for above section. I will make your next section visible.

CodePudding user response：

--> Always use "Position:relation" on parent div after give "position:absolute" to child div.
--> i add "hero-section-wrapper" div for solve this issue & add some css for it.

 const menuToggle = document.querySelector('.toggle');
         const showcase = document.querySelector('.showcase');

         menuToggle.addEventListener('click', () => {
           menuToggle.classList.toggle('active');
           showcase.classList.toggle('active');
         })
    @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


.hero-section-wrapper {
    position: relative;
    height: 100vh;
    display: table;
    width: 100%;
}


header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000000;
  transition: 0.5s;
  color: #ffff;
  z-index: 2;

}
.showcase.active
{
  right: 300px;
}



.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0394f4;
  mix-blend-mode: overlay;
  color: #001540;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 2.5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 5em;
  font-weight: 700;
  color: #64A8F0;
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}



.social
{
  position: absolute;
  z-index: 10;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}


.menu
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000026;

}
.menu ul
{
  position: relative;
}
.menu ul li
{
  list-style: none;
}
.menu ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #ffff;
}
.menu ul li a:hover
{
  color: #64A8F0;
}



.section{
    width: 100%;
    min-height: 100vh;
    background-color: #ddd;
}
.container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top: 100px;
}
.content-section{
    float: left;
    width: 55%;
}
.image-section{
    float: right;
    width: 40%;
}
.image-section img{
    width: 100%;
    height: auto;
}
.content-section .title{
    text-transform: uppercase;
    font-size: 28px;
}
.content-section .content h3{
    margin-top: 20px;
    color:#5d5d5d;
    font-size: 21px;
}
.content-section .content p{
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
.content-section .content .button{
    margin-top: 30px;
}
.content-section .content .button a{
    background-color: #3d3d3d;
    padding:12px 40px;
    text-decoration: none;
    color:#fff;
    font-size: 25px;
    letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
    background-color: #a52a2a;
    color:#fff;
}
.content-section .social{
    margin: 40px 40px;
}
.content-section .social i{
    color:#a52a2a;
    font-size: 30px;
    padding:0px 10px;
}
.content-section .social i:hover{
    color:#3d3d3d;
}
@media screen and (max-width: 768px){
    .container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top:50px;
}
.content-section{
    float:none;
    width:100%;
    display: block;
    margin:auto;
}
.image-section{
    float:none;
    width:100%;

}
.image-section img{
    width: 100%;
    height: auto;
    display: block;
    margin:auto;
}
.content-section .title{
    text-align: center;
    font-size: 19px;
}
.content-section .content .button{
    text-align: center;
}
.content-section .content .button a{
    padding:9px 30px;
}
.content-section .social{
    text-align: center;
}



@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 1.5em;
  }
  .text h3
  {
    font-size: 3em;
  }
<div >
    <section >

       <header>
         <h2 ></h2>
         <div ></div>
       </header>

       <video src="Video/video.mp4" muted loop autoplay></video>
       <div ></div>
           <div >
             <h2>Willkommen auf </h2>
             <h3>Think Tank</h3>
             <p>Beispiel.</p>
             <a href="#">THINK kaufen</a>
           </div>
           <ul >
             <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
             <li><a href="https://twitter.com/ThinkTank__?t=RxrP3KIpS8-L6UOfjpd7Ww&s=08"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
             <li><a href="https://www.instagram.com/think.tank.official/"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
           </ul>
    </section>
    </div>
     <div >
       <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="section">Unser Token</a></li>
         <li><a href="#">NFT (COMING SOON)</a></li>
         <li><a href="#">Das Team</a></li>
         <li><a href="#">Kontakt</a></li>
       </ul>
     </div>


    <div >
        <div >
            <div >
                <div >
                    <h1>About Us</h1>
                </div>
                <div >
                    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.</p>
                    <div >
                        <a href="">Read More</a>
                    </div>
                </div>
                <div >
                    <a href=""><i ></i></a>
                    <a href=""><i ></i></a>
                    <a href=""><i ></i></a>
                </div>
            </div>
            <div >
                <img src="https://images.unsplash.com/photo-1640525999004-42b645dd3dee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
            </div>
        </div>
    </div>

Page link：https//www.codepudding.com/Enterprise/242180.html

Prev:CSS Flexbox align 1 item horizontally and 2 vertically
Next:Using scrollHeight to scroll to the bottom not working with div
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding