Question

因此，我的导航栏正在通过重叠页脚而又没有足够长的时间来过自己的生活。这取决于页面的持续时间。

[ enter image description here ]

Answer 1

在CSS文件中查找定义导航栏样式的样式，并将其位置设置为相对。

#nav {
                    position: relative;
                    display: block;
                    font-size: 0.8em;
    }

Answer 2

nav {
  width: 300px;
  height: 100vh;
}

Answer 3

*,*after{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.clearfix::after
{
content:"";
display: table;
clear:both;
}

.header{
    height: 15vh; /*heigh is 20% of the view port*/
    background-color: aquamarine;
    text-align: center;
    text-transform: uppercase;
}
.container{
    height: 70vh;
    width: 100%;
    position: relative;
 
 
   

}
.container__nav
{
width: 24%;
height: 100%;
color: white;
background-color: blue;
float: left;
border:1px solid black;
}
.nav-item{
    margin-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
    list-style: none;
}

.main-block__container{
width:75%;
height: 100%;
    background-color: brown;
    color:white;
    text-align: center;
    text-transform: uppercase;
    float:left;
    border:1px solid black;
}
.footer{
    text-align: center;
    width: 100%;
    height:15vh ;
    background-color: purple;
    color:white;

}

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
   
                <header class="header">
                        this is my header
                    </header>
                    <main>
                        
                                <div class="container clearfix">
                                    <div class="container__nav">
                                        <nav class="list">
                                                <ul>
                                                        <li class="nav-item">
                                                        home
                                                        </li>
                                                            <li class="nav-item">
                                                            All
                                                            </li>
                                                                <li class="nav-item">
                                                                shirts
                                                                </li>
                                                                    <li class="nav-item">
                                                                    pants
                                                                    </li>
                                                                         <li class="nav-item">
                                                                         about
                                                                       </li>
                                                            </ul>
                                        </nav>
                            
                                    </div>
                                            <div class="main-block__container text-center">
                                                    main block
                                                </div>
                                </div>
                             
                   
            
            
                    </main>
                    <footer>
                        <div class="footer">
            this is a footer
                        </div>
            
    
       
    </body>
</html>

当元素流出时发生元素重叠，这意味着元素位置不考虑其他元素位置。例如，当position属性设置为“ absolute” /“ fixed”时，就会发生这种情况。通常，要控制布局中元素的位置，以及实现布局概念（grid / flex-box / floats），还必须使用抽象单位（％，vh，vw）来设置长度值。

下面是一个非常简单的布局设置示例，以实现与您想要的类似的结果：

我很乐意回答任何问题。

导航栏重叠且同时不够长

3 个答案: