垂直导航栏定位问题

问题描述 投票：0回答：1

我正在学习 CSS，我厌倦了定位，有人可以告诉我，为什么垂直导航栏与水平导航栏重叠？我希望垂直方向具有粘性，并且内部的链接元素对于导航栏是绝对的，正如您所看到的，我尝试使用 div，但第一个垂直链接仍然与水平方向重叠。

这是代码： `

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>replit</title>
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="style.css" rel="stylesheet" type="text/css" /> -->
        <style>
            *{
                box-sizing: border-box;
                
            }
            #hor{
                position: static;
                text-align: center;
                background-color: aqua;
                display: block;
            }
            #hor a{
                float: left;
                width: 20%;
                position: static;
                padding: 2%;
            }
            /* #w{
                position: relative;
                left:  70px;
                bottom: 20px;
            } */
            header {
                text-align: center;
                padding: 5vw;
                background-color: antiquewhite;
                font-weight: bold;
                font-family: 'Courier New', Courier, monospace;
            }

            #ver {
                width: 10vw;
                background-color: gray;
                display: block;
                position: relative;
                
            }

            #ver a{
                
                display: inherit;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                color: blue;
                
            }

            #ver a:hover{
                color: red;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div>
        <header> THIS IS HEADER</header>
        <nav id="hor" style="width: 100%;">
            <a href="" style="background-color: aqua;">LINK 1</a>
            <a href="" style="background-color: orange;">LINK 1</a>
            <a href="" style="background-color: beige;">LINK 1</a>
            <a href="" style="background-color: gray;">LINK 1</a>
            <a href="" style="background-color: red;">LINK 1</a>
        </nav>
        </div>
        <div style="position: relative; width:10vw; height:10vw;">
        <nav id="ver">
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
        </nav>
        </div>
    </body>
</html>

如何定位所有内容以使其垂直导航栏粘性？

css position css-position positioning
1个回答
0
投票

要使垂直导航栏粘性并防止与水平导航栏重叠，您可以按如下方式调整 CSS：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        header {
            text-align: center;
            padding: 5vw;
            background-color: antiquewhite;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
        }
        
        #hor {
            position: static;
            text-align: center;
            background-color: aqua;
            display: block;
        }
        
        #hor a {
            float: left;
            width: 20%;
            position: static;
            padding: 2%;
        }
        
        #ver {
            width: 10vw;
            background-color: gray;
            display: block;
            position: sticky;
            top: 0; /* Stick to the top of the viewport */
        }
        
        #ver a {
            display: block;
            padding: 10px; /* Add padding for better spacing */
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: blue;
            text-decoration: none; /* Remove underline from links */
        }
        
        #ver a:hover {
            color: red;
            background-color: green;
        }
    </style>
</head>
<body>
    <header>THIS IS HEADER</header>
    <nav id="hor" style="width: 100%;">
        <a href="" style="background-color: aqua;">LINK 1</a>
        <a href="" style="background-color: orange;">LINK 2</a>
        <a href="" style="background-color: beige;">LINK 3</a>
        <a href="" style="background-color: gray;">LINK 4</a>
        <a href="" style="background-color: red;">LINK 5</a>
    </nav>
    <nav id="ver">
        <a href="https://www.youtube.com">LINK 1</a>
        <a href="https://www.youtube.com">LINK 2</a>
        <a href="https://www.youtube.com">LINK 3</a>
        <a href="https://www.youtube.com">LINK 4</a>
        <a href="https://www.youtube.com">LINK 5</a>
    </nav>
</body>
</html>

所做的更改：

  • 删除了垂直导航栏周围多余的 
    <div>
    。
  • 将 
    position: sticky;
    添加到 
    #ver
    以使其具有粘性。
  • 将 
    top: 0;
    添加到 
    #ver
    以确保其粘在视口的顶部。
  • 将 
    #ver a
    更改为 
    display: block;
    以使每个链接显示在新行上。
  • 为 
    #ver a
    添加了填充以获得更好的间距。
  • 从水平导航栏链接中删除了内联样式以保持一致性。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.