HTML5和CSS中的滑块位置问题

我想将主滑块放在主导航的后面，因此我已将导航

位置设置为
固定
，滑块位置设置为绝对。它工作正常，但由于某种原因，整个页脚元素在导航下方和滑块上移动。我已尝试将
min width
和显示
block
赋予滑块，但它不起作用

这是我的示例代码

导航HTML:

<nav>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</nav>

<div class="slider">
  Slider Items Here
</div>

<footer>
</footer>

下面是它现在的样子：

<nav>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</nav>

<div class="slider">
  Slider Items Here
</div>

<footer>
</footer>


.wrapper{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
标题，
页脚{
高度：30px；
}
主要{
弹性：1；
}
身体{
保证金：0；
}
标题{
背景色：#2ecc71；
}
主要{
背景色：#ecf0f1；
}
页脚{
背景色：#2c3e50；
颜色：白色；
}

我是一个30像素高的头
我是填补空白的主要内容！
我是一个30像素高的人
如评论中所述，您应该将页眉和页脚位置设置为
绝对
（前者在顶部，后者在底部），然后从滑块中删除
绝对

然后您的滑块将是整个页面，页眉和页脚将始终位于正确的位置
 由于位置设置为绝对位置，因此未将其考虑到定位其他元素。@Sorikairo将滑块放置在导航后面的唯一方法是将滑块的
位置设置为
绝对
。我尝试为页脚设置不同的位置，但似乎不起作用。我建议您在导航和页脚上使用绝对位置，而不是滑块：）将第一个固定在顶部，将后者固定在顶部bottom@Sorikairo我可以用你的方法解决它：）你介意a创建一个答案，然后你接受它吗？声誉和资料（也使他人可见）虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能无效。-如果你知道Ans，那么写在这里。。。不要只提建议。。我尽我最大的努力@abusyprogrammer你的代码没有问题。你只需要直接把它贴在你的帖子里。没有必要粗鲁，阅读