Question

我想知道创建重叠导航的最佳方法。我想最简单的方法就是将它相对于包含div进行绝对定位？任何关于轻松定位此方法的想法都会很棒！

我正在考虑为“nav”使用引导按钮组。

Answer 1

这可以用最小的纯css，没有绝对位置。

为了保持导航中心，我会建议沿着下面的线条进行一些标记（导航器周围的包装，让你将它居中）。

请注意，我知道你打算使用bootstrap，你绝对可以用你想要完成的任务来做到这一点。以下只是伪代码，为您提供如何实现这一目标的关键要素/工作示例。

基本标记：

<div class="nav">
  <nav class="buttons">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
  </nav>
</div>
<div class="content">
    Borderered content area.
</div>

演示CSS：

div.nav {
  text-align: center;
  z-index: 2;
  padding-top: 1px;
}

nav {
  display:inline-block;
  margin:0 auto;
  background: white;
}

nav a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid black;
}

div.content {
  margin-top: -15px;
  z-index: 1;
  border: 2px solid red;
  min-height: 300px;
}

注意使用此标记，由于空格，最终会在<a>元素之间留出大约4px的空间。请参阅此文章：Fighting the Space Between Elements。

我的典型解决方案是将元素移动到同一行。不完全可读，但完成工作，并不需要任何其他＆＃34;时髦＆＃34;解决方案：

<nav class="buttons"> <a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a> </nav>

Answer 2

＆＃13;

.header {
  background-color: blue;
  width: 100%;
  height: 200px;
  margin-top: 25px;
}

.nav {
  position: absolute;
  left: 50%;
  top: 0;
}

.nav div {
  position: relative;
  left: -50%;
  background-color: yellow;
  width: 400px;
  height: 50px;
}

＆＃13;

<body>

<div class="nav">
        <div>
        </div>
</div>

<div class="header">

</div>
</body>

＆＃13;

或者您可以在导航栏中只使用一个div left: 25%

在CSS中，如何创建与div重叠的导航菜单？

2 个答案: