如何使用z-index将一个导航菜单堆叠在另一个菜单之上？

时间：2019-02-19 18:56:11

标签： html css z-index

我在尝试将两个导航菜单相互叠加或放置时有些卡住，我使用的是Bootstrap，HTML和CSS。

我认为我可能需要使用z-index，但不确定具体如何使用。

我添加了以下代码，并提供了我想要实现的图像。

代码：

<!<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" type="text/css">
  </head>
  <body>

  <nav class="navbar navbar-expand-md bg-white navbar-white">
    <a class="navbar-brand"  href="#">
    <img src="assets/logo2.png"height="84px">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="accessability">
        <li class="nav-item">
          <a class="contrast">Contrast</a>
        </li>
        <li class="Font-size">Font size</a>
        </li>
        <li class="download">Download a brochure</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">New Vehicles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Motability</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Aftercare</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
  <br>
  <nav class="navbar navbar-inverse bg-primary">
  <ul>
      <li class="sec-menu">Versa Connect</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="sec-menu"><a href="#">Overview</a></li>
        <li class="sec-menu"><a href="#">Offers</a></li>
          <li class="sec-menu"><a href="#">Models</a></li>
            <li class="sec-menu"><a href="#">Optional Extras</a></li>
      </ul>
</nav>
  <section id="cover_image">
    <div class="container">
 <img src="assets/cover_image.jpg" >
 <div class="text-block">
   <h1>Versa Connect</h1>
   <p>The Ford Torneo Connect is a relaxing and comfortable place to be.
   Great to drive, great to sit in, it boasts premium finish, high quality materials
 and fuel efficiency without compromising everyday practicality. </p>
 <button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
 </div>
</div>


    </body>
</html>

CSS 

h1{
  font-family: roboto;
}

p{
  font-family: roboto;
  font-size: 18px;
}
li{
  font-family: roboto;
  font-size: 18px;
  display:inline;

  padding: 30px;
}

li a{
  color: #000;
}
.navbar-right{
  float: right !important;
  margin-right: -15px;
  display: inline;
}
ul.nav navbar-nav navbar-right li a{
  display: flex;
}
li.sec-menu a{
  color: #fff;
  font-family: roboto;
}
.container{
  margin: 0;
  padding: 0;
}
.text-block {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 100px;

  background-color:rgba(255,255,255,0.66);
  color:#000;
  width: 380px;
  padding:50px;
}
.btn btn-lg btn-primary{
  padding-left: 10px;
  width: 360px;
}

如果有人可以帮助我进行编码并向我展示如何在代码中编码z-index，我将不胜感激。 Screenshot

2 个答案:

答案 0 :(得分：1)

z-index属性用于通过z平面（以3维平面为单位）将项目堆叠在一起，因此该属性在这里无济于事。您需要做的就是使用单独的“ nav”或“ div”标签创建每个导航栏，这会将它们放在单独的行上。

您步入正轨，但是您的代码中存在多个导致此问题的错误。您的导航栏由“对比度，字体大小，下载小册子”组成，具有闭合的锚标签，但没有开始的锚标签。此导航栏还使用CSS中未定义的“可访问性”类，这就是为什么它显示为无样式无序列表的原因。

这是您要查找的内容的简单版本： 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">Contrast</a></li>
			<li><a href="#">Font Size</a></li>
			<li><a href="#">Download a Brochure</a></li>
		</ul>
	</nav>
	<nav>
		<ul>
			<li><a href="#">New Vehicles</a></li>
			<li><a href="#">Nearly New/Used Vehicles</a></li>
			<li><a href="#">Motability</a></li>
			<li><a href="#">Aftercare</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</nav>
</body>
</html>

答案 1 :(得分：1)

这有效，您不需要z-index。您可以在这里在Codepen https://codepen.io/anon/pen/Rvdgaq

上查看 
<nav class="navbar navbar-expand-md bg-white navbar-white">
    <a class="navbar-brand"  href="#">
         <img src="assets/logo2.png"height="84px">
    </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">

 <ul class="accessability">
    <li class="nav-item">
      <a class="contrast">Contrast</a>
    </li>
    <li class="Font-size">Font size</a>
    </li>
    <li class="download">Download a brochure</a>
    </li>
   </ul>
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">New Vehicles</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Motability</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Aftercare</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
  </ul>
</div>
</nav>

    <nav class="navbar navbar-inverse bg-primary">
  <ul>
      <li class="nav-item sec-menu">Versa Connect</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item sec-menu"><a href="#">Overview</a></li>
        <li class="nav-item sec-menu"><a href="#">Offers</a></li>
        <li class="nav-item sec-menu"><a href="#">Models</a></li>
        <li class="nav-item sec-menu"><a href="#">Optional Extras</a></li>
      </ul>
</nav>

  </div>

</div>
 <section id="cover_image">
    <div class="container">
      <div class="row">
         <img src="assets/cover_image.jpg" >
 <div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
   Great to drive, great to sit in, it boasts premium finish, high quality materials
 and fuel efficiency without compromising everyday practicality. </p>
 <button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
 </div>
</div>
</div>
 </section>

我注意到的几件事：1.您没有关闭section标签，所以可能引起问题。而且您不需要位置：绝对；在.text-block上，取下底部：10px;

使其相对位置

相关问题
最新问题