这是我遇到的一个非常奇怪的问题。每次我在主内容中添加更多内容时，侧导航链接都无法点击。下面是一个没有主内容的侧导航示例：
<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页面制作边栏的例子，也许这会有所帮助。如果你也能帮我弄清楚如何修复侧边栏，并使其可滚动，而不是填满整个页面，那将不胜感激，谢谢。
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>