Html 当我调整浏览器尺寸时，导航标志和菜单会相互插入

我制作了导航栏，菜单和徽标彼此相邻，有什么问题吗？嗯，当我调整浏览器的大小时，它们会互相影响。在我的示例中，logo具有更高的

z索引

，因此当我调整大小时，菜单不可见，我需要解决此问题

#导航栏ul li.a1{
位置：固定；
左：0；
左侧填充：18px；
光标：指针；
颜色：rgb（252227,0）；
字号：1.2rem；
文字装饰：无；
过渡：.5s；
}
#导航栏#标志img{
宽度：90px；
高度：48px；
背景：黑色；
位置：绝对位置；
z指数：1000；
左：6%；
左侧填充：12px；
}

使用

左：100px而不是
左侧：6%它会工作的


#导航栏ul li.a1{
位置：固定；
左：0；
左侧填充：18px；
光标：指针；
颜色：rgb（252227,0）；
字号：1.2rem；
文字装饰：无；
过渡：.5s；
}
李{
列表样式类型：无；
}
#导航栏#标志img{
宽度：90px；
高度：48px；
背景：黑色；
位置：绝对位置；
z指数：1000；
左：100px；
左侧填充：12px；
}




试试这段代码

#navbar{
    position: fixed;
    width: 100%;
    height: 100px; /*if not required dont give height*/
    display:flex;
    top: 0;
    left: 0;
}
#navbar ul li .a1 {
padding-left:18px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
#navbar #logo img {
    width:90px;
    height:48px;
    background: black;
}

定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。查看并查看响应式css：