垂直堆叠菜单项不工作

Question

我正在尝试创建一个点导航(类似于在w3学校的整页滑块上看到的)，但是我似乎无法垂直堆叠点并将其放置在页面的右侧

我试了很多可用的答案在这里(链接如下)，但似乎没有一个工作。

(使用margin:auto垂直对齐div，在div中垂直居中，如何在ul中垂直居中li元素?)css，如何使用html强制列表垂直css)

li标签中的显示块可以工作，但是当用户滚动时，元素会显示为它们自己的部分，而不是在背景图像的顶部。也许有什么东西是相互矛盾的，我似乎不能很清楚地指出来。

感谢HTML和CSS

.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;

}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: rgba(155,155,155,0.3);
text-indent: -999em;
cursor: pointer;
position: absolute;
}

<div class="container">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about us">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section>
</section>
</div>

Answer 1

你的html代码中有错误<div class="container>必须是<div class="container">,<li><a href="#about us" class="space-item">About us/a></li>必须是<li><a href="#about us" class="space-item">About us</a></li>

检查这个片段

.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;

}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: lightgrey;
text-indent: -999em;
cursor: pointer;
position: absolute;
}

<div class="container">
<nav>
<ul>
<li><a href="#home" class="space-item">Home</a></li>
<li><a href="#portfolio" class="space-item">Portfolio</a></li>
<li><a href="#about us" class="space-item">About us</a></li>
<li><a href="#contact" class="space-item">Contact</a></li>
</ul>
</nav>
<section>
</section>
</div>