javascript - 内容超过标题
问题描述
我的标题是固定的,文本设置为相对的。当我滚动时,文本会越过标题。
我希望我的文字不要超过我的标题。
Javascript是在开始。
CSS 在中间。
HTML 在最后。 这是我的照片,希望它没有超链接 :)
我是网页设计的新手,我正在学习 CS50 课程。此外,我已经尝试使文本固定并且标题相对。
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
@media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programmer</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Programmer</a>
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
解决方案
欢迎!
好的,因此使用名为 z-index 的属性,我们可以更改出现在顶部的顺序,如下所示:
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
z-index: 1;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
@media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Programmer</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Programmer</a>
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
所以,z-index default 实际上是设置为0,所以设置一个元素为z-index: 1; 将使“优先级”排在其他一切之上。希望这可以帮助。
推荐阅读
- javascript - 如何分叉 Cognito 会话
- javascript - 有没有办法修复所有 eslint 错误?
- python - 如何将以下文本转换为二进制和可读文本?它是用什么形式写的?
- docker - 如何使用 docker-compose 从 Swagger UI 的顶部导航栏中删除探索表单
- artifactory - 如何避免来自 JFrog Artifactory 的校验和文件?
- java - 我已将我的项目迁移到 AndroidX 但仍然有错误
- java - 从 yaml 动态创建属性
- python - 我知道在和 == 在 python 中具有相同的优先级。但奇怪的结果发生了
- php - 使用 elsticsearch 进行功能性 phpunit 测试
- r - 为什么我无法在 VS Code 中使用 [R]?