html文字下方横线设置position:absolute之后消失了

如题。
原来没设置之前，导航栏的文字挤到横线下面去了，所以我项设置样式position:absolute把横线调整到文字下方，但是消失不见了。别的p,h1,div，都能看到。



<style>
nav{
    height: 800px;
    width: 500px;
  position: absolute;
  left: 430px;
  top: 90px;
}
hr{
  position: relative;
}
#hr1{
    position: absolute;
    left: 600px;
    top: 1000px;
}
</style>
<body>
<hr>
    目录<nav align="center">
    <a href="#part1">1.定义</a>
    <a href="#part2">2.Newton-Gauss线确定的角度相等</a>
    <a href="#part3">3.与Newton-Gauss线平行</a>
    <a href="#part4">4.两个循环四边形确定Newton-Gauss线</a>
    <a href="#part5">5.具有相同Newton-Gauss线的两个完全四边形</a>
    <a href="#part6">6.参考文献</a>
    <a href="#part7">7.数学家介绍</a>
</nav>
<hr id="hr1">

img

改成relative就能看到，但是relative横线会穿上我上面的文字。我想让横线在上面文字的下方。


<style>
nav{
    height: 800px;
    width: 500px;
  position: relative;
  left: 430px;
  top: 90px;
}
hr{
  position: relative;
}
</style>
<body>
<hr>
    目录
<nav align="center">
    <a href="#part1">1.定义</a>
    <a href="#part2">2.Newton-Gauss线确定的角度相等</a>
    <a href="#part3">3.与Newton-Gauss线平行</a>
    <a href="#part4">4.两个循环四边形确定Newton-Gauss线</a>
    <a href="#part5">5.具有相同Newton-Gauss线的两个完全四边形</a>
    <a href="#part6">6.参考文献</a>
    <a href="#part7">7.数学家介绍</a>
</nav>
<hr>
    </body>

</html>

可以把#hr1的left去掉，然后加个width: 100%; 如果看不见，把top设置小点比如200ox就可以看见线了。