Question

我正在尝试找到一个简单的修复程序让我的标题保持在固定位置，但是当我将“position：fixed”应用于我的标题类时，没有任何反应。我也尝试了标题中的h1标签。如果有人能告诉我我做错了什么，以及在向下滚动屏幕时让标题保持固定的最简单方法，我真的很感激。我粘贴了下面的标题部分。

感谢您的所有建议！

 <header class="logo">
    <h1>The Loch Ness Monster Report</h1>
    <ul id="nav-menu">
        <li><a class="selected" href="index.html">Latest Sightings</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="contact.html">Report a Sighting</a></li>
        <li><a href="donations.html">Donate</a></li>
    </ul>
</header>

CSS正在运行，因为其他元素已连接。这就是我用于标题元素的CSS。

.logo {
 position: fixed;
 z-index: 1;
 }

Answer 1

你可以这样做。

header{
  width: 100vw; //set header width equal to viewport width.

}
.logo {
 position: fixed; //set header fix to top 
 z-index: 1;
 display: flex; // displays  logo content horizontally
 justify-content: flex-start; // set logo content 
 flex-direction: row;
 height: auto;
 background: #000000;
 color: white;
 }
 #nav-menu{
   display: flex; 
   flex-direction: row;  //display lost horizontally
 }
 h1{
   font-size: 140%;
 }
 li{
   padding: 5px;
   list-style: none;
 }
 a{
   text-decoration: none;
   color: white
 }
 li:hover{
   background-color: white;
    border-radius: 5px;
 }
 a:hover{
   color: red;


 }

 body{
   // reset body properties
   padding: 0;
   margin: 0;
 }
.container{
  padding-top: 60px;
}
 section{
   height: 500px;
   width: 960px;
 }
.section1{
  background-color: blue;
}
.section2{
  background-color: orange;
}
.section3{
  background-color:  red;
}

<body>
    <header class="logo">
        <h1>The Loch Ness Monster Report</h1>
        <ul id="nav-menu">
            <li><a class="selected" href="index.html">Latest Sightings</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="contact.html">Report a Sighting</a></li>
            <li><a href="donations.html">Donate</a></li>
        </ul>

  </header>
  <div class="container">
  <Section class="section1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Section>
  <Section class="section2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Section>
  <Section class="section3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Section>
  </div>
  </body>

标题不会定位：绝对

1 个答案: