javascript - 内容超出标题

标签 javascript html css

我的标题已固定，文本设置为相对。当我滚动时，文本会越过标题。

我希望我的文字不要超出标题。

Javascript 位于开头。

CSS 位于中间。

HTML 位于最后。 This is my picture, hopefully it didn't hyperlink :)

我是网页设计新手，正在学习 CS50 类(class)。此外，我已经尝试使文本固定并使标题相对。 

```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()">&times;</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()">&times;</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默认值实际上设置为0，因此将元素设置为z-index: 1;将使之成为最重要的“优先事项”。希望这会有所帮助。

关于javascript - 内容超出标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61369406/

上一篇：javascript - 更改工具栏中的图标缩放react-apexchart

下一篇：javascript - Vue中父组件向子组件传递数据的方法

相关文章：

javascript - 使用 JavaScript 或 Puppeteer 检测页面上的元素是否可见

php - HTML 字符串中所有字符的字符数，但仅测量 20 个可见单词

html - Mat-Dialog 在页面底部打开而不是弹出窗口？

javascript - 如何不使用 google-visualization-errors-% 显示 ID

css - 输入文本框宽度和字体宽度

javascript - 在 Android 浏览器上，在文本框内输入时整个页面会上下跳动？

javascript - react native 异步/等待不等待

javascript - 使用 jQuery 在另一个事件发生更改事件后弹出下拉菜单

javascript - 为什么由 new Object() 创建的对象的原型(prototype)未定义？

javascript - 动态显示 HTML 页面 AngularJS

©2024 IT工具网  联系我们