时间戳

首页 > 解决方案 > Sidenav 链接无效

html - Sidenav 链接无效

问题描述

这是我遇到的一个非常奇怪的问题。每次我向主要内容添加更多内容时，sidenav 链接都无法单击。这是一个没有主要内容的 sidenav 示例：

<style>
div.sidenav {
  width: 240px;
  position: absolute;
  z-index: -1;
  top: 110px;
  left: 10px;
  background: transparent;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 8px 0;
  border-style: dashed; color: #28eb4c;
  text-align: center;
}
div.sidenav a {
  padding: 1px 2px 1px 10px;
  text-decoration: none;
  font-size: 25px;
  color: #ed7eeb;
  display: block;
}
div.sidenav a:hover {
  color: #e3a8e2;
}
div.main {
  margin-left: 240px;
  padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
<a href="https://www.youtube.com/"> YouTube</a>
<a href="https://www.twitter.com/"> Twitter</a>
</div>
<div class="main">
<h2>Some text</h2>
</div>
</body>

这是一个带有正文的示例：

<style>
div.sidenav {
  width: 240px;
  position: absolute;
  z-index: -1;
  top: 110px;
  left: 10px;
  background: transparent;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 8px 0;
  border-style: dashed; color: #28eb4c;
  text-align: center;
}
div.sidenav a {
  padding: 1px 2px 1px 10px;
  text-decoration: none;
  font-size: 25px;
  color: #ed7eeb;
  display: block;
}
div.sidenav a:hover {
  color: #e3a8e2;
}
div.main {
  margin-left: 240px;
  padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
<a href="https://www.youtube.com/"> YouTube</a>
<a href="https://www.twitter.com/"> Twitter</a>
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
</body>

也许我把部分搞砸了<style>？我大多不知道那里发生了什么，尤其是边距和填充，也许我已经用主体覆盖了边距。我还看到了侧边栏在另一个页面中制作为完全不同的 html 页面的示例，也许这会有所帮助。如果您还可以帮助我弄清楚如何修复侧边栏并使其可滚动而不是填充整个页面，那将不胜感激，谢谢。

标签： htmlcsssidebarsidenav

解决方案

z-index 属性指定元素的堆叠顺序：

div.sidenav {
  width: 240px;
  position: absolute;
  z-index: 10;
  top: 110px;
  left: 10px;
  background: transparent;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 8px 0;
  border-style: dashed; color: #28eb4c;
  text-align: center;
}
div.sidenav a {
  padding: 1px 2px 1px 10px;
  text-decoration: none;
  font-size: 25px;
  color: #ed7eeb;
  display: block;
}
div.sidenav a:hover {
  color: #e3a8e2;
}
div.main {
  margin-left: 240px;
  padding: 10px 10px;
}
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
<a href="https://www.youtube.com/"> YouTube</a>
<a href="https://www.twitter.com/"> Twitter</a>
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
最好使用 flex 或 grid

推荐阅读