I used position absolute to style my showcase section as there were many layers and now when I am trying to design further, everything is just going under the Showcase section
i.e., my sec2 section, it is not visible because it is hiding under the showcase section.
Does anyone has a fix where I dont have to style everything again without using position absolute,
I was told that is should add position relative to sec2 section but that didnt work either
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 40px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
height: 100%;
width: 25%;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(../images/Icons/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(../images/Icons/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: #111;
transition: 0.5s;
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: #ab2626;
mix-blend-mode: overlay;
}
.text
{
position: relative;
z-index: 10;
/* background-image: linear-gradient(rgba(17,20,27,0.75),rgba(171,38,38,0.75));
padding: 1%;
border-radius: 24px; */
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 4em;
font-weight: 700;
color: #fff;
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;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover
{
color: #03a9f4;
}
/* .video {
filter: blur(3px);
-webkit-filter: blur(3px);
} */
.sec2 {
position: relative;
}
@media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
.text h3
{
font-size: 2em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home | Iruna Digital</title>
</head>
<body>
<section class="showcase">
<header>
<img src="./assets/images/logo.webp" class="logo" alt="">
<div class="toggle"></div>
</header>
<video src="https://traversymedia.com/downloads/videos/explore.mp4" class="video" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Dev & Marketing</h2>
<h3>Agency</h3>
<p>Service that satisfies you, with the Iruna Digital guarantee, we assure you your brand is our brand, our clients represent our organization and us, and we do not believe in revisions. We do our work over and over till you are content. Our job is not based on looks; we believe in numbers and let the data speak for itself. Your need is our quest to succeed!</p>
<a href="#">Explore</a>
</div>
<ul class="social">
<li><a href="https://www.facebook.com/irunadigital" target="blank"><img src="./assets/images/Icons/facebook.png"></a></li>
<li><a href="https://twitter.com/DigitalIruna" target="blank"><img src="/assets/images/Icons/twitter.png"></a></li>
<li><a href="https://www.instagram.com/iruna_digital/" target="blank"><img src="/assets/images/Icons/instagram.png"></a></li>
</ul>
</section>
<div class="menu">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- hero end -->
<!-- 2nd Section Start -->
<section class="sec2">
<h3>
Who Are We !?
</h3>
<h2
>We are a design and development & Digital Marketing & Production company based in Atlanta. We are a one stop shop for all digital needs of a business.
We are a tribe of creative nerds who love doing what we do best, and that is revitalizing your brand.
In this era of technology, we're by your side for all your digital needs, to revitalize your brand. From logos to animation to complete website development. Iruna Digital is the perfect CTO for your company.
</h2>
<ul>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
</ul>
</section>
</body>
<script src="./assets/js/main.js"></script>
</html>CodePudding user response：
Parent with position:relative will contain children with position:absolute;
And it occupies space in page.
Hope this is what you want:
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 40px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
height: 100%;
width: 25%;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(../images/Icons/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(../images/Icons/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position:relative;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
transition: 0.5s;
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: #ab2626;
mix-blend-mode: overlay;
}
.text
{
position: relative;
z-index: 10;
/* background-image: linear-gradient(rgba(17,20,27,0.75),rgba(171,38,38,0.75));
padding: 1%;
border-radius: 24px; */
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 4em;
font-weight: 700;
color: #fff;
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;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover
{
color: #03a9f4;
}
/* .video {
filter: blur(3px);
-webkit-filter: blur(3px);
} */
.sec2 {
position: relative;
}
@media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
.text h3
{
font-size: 2em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home | Iruna Digital</title>
</head>
<body>
<section class="showcase">
<header>
<img src="./assets/images/logo.webp" class="logo" alt="">
<div class="toggle"></div>
</header>
<video src="https://traversymedia.com/downloads/videos/explore.mp4" class="video" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Dev & Marketing</h2>
<h3>Agency</h3>
<p>Service that satisfies you, with the Iruna Digital guarantee, we assure you your brand is our brand, our clients represent our organization and us, and we do not believe in revisions. We do our work over and over till you are content. Our job is not based on looks; we believe in numbers and let the data speak for itself. Your need is our quest to succeed!</p>
<a href="#">Explore</a>
</div>
<ul class="social">
<li><a href="https://www.facebook.com/irunadigital" target="blank"><img src="./assets/images/Icons/facebook.png"></a></li>
<li><a href="https://twitter.com/DigitalIruna" target="blank"><img src="/assets/images/Icons/twitter.png"></a></li>
<li><a href="https://www.instagram.com/iruna_digital/" target="blank"><img src="/assets/images/Icons/instagram.png"></a></li>
</ul>
</section>
<div class="menu">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- hero end -->
<!-- 2nd Section Start -->
<section class="sec2">
<h3>
Who Are We !?
</h3>
<h2
>We are a design and development & Digital Marketing & Production company based in Atlanta. We are a one stop shop for all digital needs of a business.
We are a tribe of creative nerds who love doing what we do best, and that is revitalizing your brand.
In this era of technology, we're by your side for all your digital needs, to revitalize your brand. From logos to animation to complete website development. Iruna Digital is the perfect CTO for your company.
</h2>
<ul>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
</ul>
</section>
</body>
<script src="./assets/js/main.js"></script>
</html>CodePudding user response：
welcome to S/O you could try setting
z-index
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 40px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
height: 100%;
width: 25%;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(../images/Icons/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(../images/Icons/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: #111;
transition: 0.5s;
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: #ab2626;
mix-blend-mode: overlay;
}
.text
{
position: relative;
z-index: 10;
/* background-image: linear-gradient(rgba(17,20,27,0.75),rgba(171,38,38,0.75));
padding: 1%;
border-radius: 24px; */
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 4em;
font-weight: 700;
color: #fff;
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;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover
{
color: #03a9f4;
}
/* .video {
filter: blur(3px);
-webkit-filter: blur(3px);
} */
.sec2 {
position: relative;
background-color: green;
z-index:1000;
}
@media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
.text h3
{
font-size: 2em;
}
} <title>Home | Iruna Digital</title>
</head>
<body>
<section class="showcase">
<header>
<img src="./assets/images/logo.webp" class="logo" alt="">
<div class="toggle"></div>
</header>
<video src="https://traversymedia.com/downloads/videos/explore.mp4" class="video" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Dev & Marketing</h2>
<h3>Agency</h3>
<p>Service that satisfies you, with the Iruna Digital guarantee, we assure you your brand is our brand, our clients represent our organization and us, and we do not believe in revisions. We do our work over and over till you are content. Our job is not based on looks; we believe in numbers and let the data speak for itself. Your need is our quest to succeed!</p>
<a href="#">Explore</a>
</div>
<ul class="social">
<li><a href="https://www.facebook.com/irunadigital" target="blank"><img src="./assets/images/Icons/facebook.png"></a></li>
<li><a href="https://twitter.com/DigitalIruna" target="blank"><img src="/assets/images/Icons/twitter.png"></a></li>
<li><a href="https://www.instagram.com/iruna_digital/" target="blank"><img src="/assets/images/Icons/instagram.png"></a></li>
</ul>
</section>
<div class="menu">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- hero end -->
<!-- 2nd Section Start -->
<section class="sec2">
<h3>
Who Are We !?
</h3>
<h2
>We are a design and development & Digital Marketing & Production company based in Atlanta. We are a one stop shop for all digital needs of a business.
We are a tribe of creative nerds who love doing what we do best, and that is revitalizing your brand.
In this era of technology, we're by your side for all your digital needs, to revitalize your brand. From logos to animation to complete website development. Iruna Digital is the perfect CTO for your company.
</h2>
<ul>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
<li>
<img src="" alt="">
<h5> </h5>
</li>
</ul>
</section>
<script src="./assets/js/main.js"></script>this allows you to change the stack order of the elements ie: bring to front-back etc, the browser stacks elements as it sees's them, sometime we have to adjust by hand.
you can try experimenting with changing either sec2 (in example) or the showcase section.