Question

我制作了导航栏，菜单和徽标彼此相邻，这是什么问题？当我调整浏览器大小时，它们会相互融合。在我的示例中，徽标的z-index较高，因此在放大时看不到菜单，我需要解决此问题的方法

#navbar ul li .a1 {
    position: fixed;
    left:0;
    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;
    position: absolute;
    z-index: 1000;
    left:6%;
    padding-left:12px;
}

<div id="navbar">
  <div id="logo">
    <img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
  </div>
  <ul>
    <li>
      <a href="#" class="a1">
        <i class="fa fa-bars"></i>Menu
      </a>
    </li>
  </ul>
</div>

Answer 1

使用left:100px;代替left:6%;，它将起作用

#navbar ul li .a1 {
    position: fixed;
    left:0;
    padding-left:18px;
    cursor: pointer;
    color:rgb(252,227,0);
    font-size:1.2rem;
    text-decoration: none;
    transition: .5s;
}

li{
  list-style-type: none;
}

#navbar #logo img {
    width:90px;
    height:48px;
    background: black;
    position: absolute;
    z-index: 1000;
    left:100px;
    padding-left:12px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navbar">
	<div id="logo">
		<img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
	</div>
	<ul>
		<li><a href="#" class="a1"><i class="fa fa-bars"></i> Menu</a></li>
	</ul>
</div>

Answer 2

尝试此代码

#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;
}

调整浏览器大小时，导航徽标和菜单会互相进入

2 个答案: