问题
For a design project I'm doing, I want to put a clip-path on my secondary content. However, after putting the clip-path code, some of the children or elements are disappearing on my .about content. I've tried using position:absolute or z-index but nothing happens on the content of my .about content. Thanks in Advance.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background: linear-gradient( #001f3f, transparent 80% ),
linear-gradient(0deg, #fff, transparent)
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.firstlayout {
height: 100vh;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website *****************/
.content {
height: 100vh;
text-align: center;
}
.possible {
color: #fff;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 8rem;
font-family: "Coiny", sans-serif;
font-size: 3.6rem;
}
.possible2 {
color: #fff;
padding-top: 4rem;
font-family: "Montserrat", sans-serif;
font-size: 2.5rem;
}
.arrow {
width: 50px;
padding-top: 10rem;
}
/* About 2nd layer ******************/
.about {
position: absolute;
height: 100vh;
background-color: firebrick;
clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
width: 100%;
z-index: -1000;
}
.jury {
position: relative;
font-family: "Coiny", sans-serif;
text-align: center;
font-size: 4rem;
padding-top: 2em;
}
.jury span {
color: #f4511e;
}
.rectangle {
border: 1px solid firebrick;
fill: firebrick;
}<body>
<div class="body">
<div class="firstlayout">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu">
<a href="#" class="btn">Contact</a>
<a href="#" class="btn btninfo">Info</a>
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<h2 class="possible2">"as long as you put your mind to it and put the work and time into it"</h2>
<a href="#about"><img class="arrow" src="img/arrow.svg" alt="Down arrow"></a>
</div>
</div>
</div>
<div id="about" class="about">
<h1 class="jury"><span>Hi!</span>, I'm Jury Gregorio</h1>
<div class="rectangle"><br></div>
</div>
</body>回答1:
This is the logical result of the clip-path because it will clip the element and its content.
You can replace clip-path with a simple background in this case:
.clip-path {
clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
background: red;
}
.background {
background:
linear-gradient(to bottom right,transparent 49.8%,red 50%) right /59% 100%,
linear-gradient(to bottom right,transparent 49.8%,red 50%) bottom right/153% 61%;
background-repeat:no-repeat;
}
.box {
padding: 10px;
margin:10px;
font-size:25px;
border:1px solid;
}<div class="clip-path box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
eros, ultrices in luctus ac, malesuada nec lectus.
</div>
<div class="background box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
eros, ultrices in luctus ac, malesuada nec lectus.
</div>来源：https://stackoverflow.com/questions/55989471/child-element-disappears-after-clip-path-added