粘性导航栏问题

Question

我对 html 和 CSS 很陌生。我制作了一个原型网页，一切正常。我认为将水平顶部导航栏设为粘性是个好主意。

起初，它不起作用。如果您添加 nav class，我基本上只会让它变粘。我首先使用 div 执行此操作，但没有成功。我通过将其更改为 span 来修复它。由于某种原因，它起作用了，但它不适用于整个页面。

基本上，导航栏位于其中一个部分的后面，而不是其他部分。

我听说过使用 z-index，但他们说那只适用于 div。 z-index也需要你用position: relative，但我用的是position: sticky。我可能错了 z-index 或者遗漏了什么。

那么，如何让导航栏粘在左栏和正文前面，而不是右栏。

html:（格式不好请见谅）

<!DOCTYPE html>
<html>
<head>

    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<span class="nav">
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</span>
<div class="left-column">
  <div class="body">
<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <em>I said a simple page put together using HTML.</em> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
    <li>To learn HTML</li>
    <li>To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I have fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

<h2>Where to find the <a href = "http://www.htmldog.com">tutorial</a></h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog"></a></p>

<h3>Some random table</h3>
<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

<p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

<p>If you add the line <code><var>givevaderachuckle</var> = true;</code> to the <code>destroy_planet</code> subroutine and then type <kbd>ilovejabba</kbd> into the console, the big bad green Death Star laser will etch <samp>Slug Lover!</samp> on the planet's surface.
alsfo  jfdjs ioj iojo ijio jioj oijoi joisodfil givevaderachuckle jksldfk;afjskdfl</p>

<code><pre>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</pre></code>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing.</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>

<p><input type="submit"></p>

</form>
</div>
</div>
</body>
</html>

CSS:

body {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  background-color: #ddd;
  font-family: sans-serif;
  font-size: 32px;
  margin: 0;
  margin-right: 500px;
  border-right: solid;
  border-color: #6393BC;
  padding: 0;
}
.left-column {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  margin-left: 200px;
  border-left: solid;
  border-color: #6393BC;
}
.body {
  background-color: white;
  padding: 100px 100px;
}




h1 {
  margin: 0;
  padding: 0;
}
h2 {
  margin: 0;
  padding: 5px 20px;
}
h3 {
  margin: 0;
  padding: 3px 30px;
}




p {
  padding: 0px 60px;
}
p:not(.un-indent) { text-indent: 40px; }  .un-indent { text-indent: 0px; }




a {
  color: #6393BC;
}




ul {
  padding: 0;
  margin: 5px 75px;
}
ol {
  padding: 0;
  margin: 5px 75px;
}





code {
  font-size: 0.75em;
  padding: 1px 2px;
  display: inline;
  border-radius: 8px;
  background-color #dfdfdf;
}
code pre {
  font-size: 24px;
  margin: 0px 60px;
  padding: 15px 10px;
  display: block;
  border-radius: 0px 8px 8px 0px;
  border-left: solid;
  border-width: 6px;
  width: 1200px;
  height: 300px;
  overflow: scroll;
  border-color: #6393BC;
  background-color: #eeeeee;
}
.new-code {
  display: inline;
  padding: 1px 1px;
  background-color: yellow;
}




.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ddd;
  border-bottom: solid;
  border-color: #6393BC;
  position: -webkit-sticky; /*Safari*/
  position: sticky;
  top: 0;
}
.nav ul li {
  float: left;
  border-right: 3px solid #bbb;
}
.nav ul li:last-child {
  border-right: none;
}
.nav ul li a {
  color: black;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 40px;
}
.nav ul li a:hover:not(.active) {
  background-color: #aaa;
}
.nav ul li a:hover.active {
  background-color: #6393BC;
}
.nav .active {
  background-color: #6EA2D0;
}

此外，抱歉，如果其中有笑话或我的教程链接，那是网站告诉我要做的事情的一部分。

它应该如何分层：（假设它是粘性的，并且在页面中间）它看起来像什么：

如何实现一个层次分明的粘性导航栏？

Answer 1

你可以简单地将ul元素的z-index设置为1。这很好用。

粘性导航栏问题

sticky navigation bar issues

html

css

sticky