我使用絕對位置來設計展示部分的樣式，因為有很多層，現在當我嘗試進一步設計時，一切都在展示部分下
即，我的sec2部分不可見，因為它隱藏在展示部分下。
有沒有人有解決方法，我不必在不使用絕對位置的情況下再次設定所有樣式，
有人告訴我應該添加相對于sec2部分的位置，但這也不起作用
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>uj5u.com熱心網友回復：
父 withposition:relative將包含子 withposition:absolute;
并且它在頁面中占據空間。希望這是你想要的：
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>uj5u.com熱心網友回復：
歡迎來到 S/O 你可以嘗試設定
z-索引
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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346572.html
標籤：javascript html css