css 如何有一个固定的导航栏和内容是在它下面

3ks5zfa0 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(93)

我有一个固定的navbar：

.navbar
{
    display: inline-block;
    background-color: #2327fc;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    z-index:1;
    width: 100%;
    position:fixed; 
}

.navObject
{
    display: block;
    padding:1vh;
}

.navLink
{
    display:block;
    background-color: #79aada;
    padding:0.55vh;
    border-style: solid;
    border-color: #7c9ff9;
    color:#ffffff;
    font-weight: bold;
    text-align:center;
    text-decoration: none;
    font-size: 3vh 3vw;
}

字符串
我希望div在导航条下面。有没有一种方法可以做到这一点，而不需要猜测所需的边距。

<!DOCTYPE html>
        <html>
            <body>
                <article>
                    <div>
                        <ul class ='navbar'>

                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 1</a></li>
                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 2</a></li>
                        <li class = 'navObject'><a href="(a link)" class="navLink" >Link 3</a></li>

                         .... more navbar content       
                        </ul>
                    </div>
                    <div>
                        ...below content
                    </div>
    ..closing tags

型
目前，下面的div中的内容是从html页面的顶部显示的，导航栏覆盖了其中的一些内容。
我希望内容在导航栏下面。（但也是固定的-我明白把它固定需要它的流，但有一个变通办法？）
谢谢

css

来源：https://stackoverflow.com/questions/77500755/how-to-have-a-fixed-navbar-and-the-content-is-below-it