有人可以解决此问题吗?如果您查看我的Codepen链接,将会在深灰色div后面隐藏一个文本“ Johnny”。难道有一个简单的解决方案吗?谢谢!
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny Porty</title>
<!-- LINKED CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- LINKED FONT -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<h1>NOICE</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact <span class="arrow arrow-bottom"></span></a></li>
</ul>
</nav>
<div class="first_div">
<h1> JOHNNY </h1>
</div>
<div class="second_div">
<h1> STONEY </h1>
</div>
<!-- LINK SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
z-index
在没有明确定位的情况下将无法工作。在position: relative
和.first_div
上设置.second_div
,以使当前代码按预期工作。
在const date = new Date;
const minutes = date.getMinutes() % 10;
const seconds = date.getSeconds();
const nextTime = minutes < 5 ? 5 : 10;
const secondsLeft = nextTime * 60 - minutes * 60 - seconds;
console.log(secondsLeft);
和position: relative
上明确定义.first_div
接着
在.second_div
上设置z-index:10
nav
window.onscroll = function() {scrollNav()};
var navbar = document.getElementById("navbar");
function scrollNav() {
if (window.pageYOffset >= 1) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index:10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
position: relative;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 3;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
z-index: 4;
position: relative;
}
.second_div h1{
margin: 0;
}
不确定是否要使用它,但是可以尝试将CSS代码替换为
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index: 10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 2;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
position: absolute;
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
width: 100%;
z-index: 4;
}
.second_div h1{
margin: 0;
}