Z 索引问题。 Bootstrap 导航栏中心的欢迎信息

Question

我想使用引导导航栏，并且想在导航栏的中心显示欢迎消息。我在 HTML 中这样做：https://jsfiddle.net/DTcHh/22779/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

<nav  class="navbar navbar-inverse navbar-fixed-top">   
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="welcome">
    <h1>Bienvenue</h1>
</div>

但是欢迎信息永远不会显示。如果我在欢迎类中设置了高 z-index，那么汉堡菜单就会出现问题......我该如何解决这个问题？

提前致谢

Answer 1

第二版

由于the different stacking contexts，我们不能将 div 放在导航栏之外并将这个 div 放置在导航栏及其项目之间：

每个堆叠上下文完全独立于其兄弟元素：处理堆叠时只考虑后代元素。

所以我们必须将welcome 块放在导航栏的开头。在这种情况下，我们不需要使用z-index。

请查看结果：https://jsfiddle.net/glebkema/4baoqn6p/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

.welcome {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
}
.welcome h1 {
  color: #555;
  font-weight: 900;
  line-height: 50px; /* = height of navbar */
  margin: 0;
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .navbar-inverse .navbar-nav>li>a {
    color: #ccc; 
  }
}

<nav class="navbar navbar-inverse navbar-fixed-top">   
    <div class="welcome">
        <h1>Bienvenue</h1>
    </div>
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>

第一版

1. .navbar-fixed-top 类具有 z-index: 1030; 属性。因此.welcome 类的z-index 必须更大。

2. 使用position: absolute; 属性。

3. left: 0; right: 0; 属性使块与屏幕一样宽。

请查看结果：https://jsfiddle.net/glebkema/fc8aydb4/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

.welcome {
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 5px;
  z-index: 2000;
}
.welcome h1 {
  margin: 0;
}

<nav class="navbar navbar-inverse navbar-fixed-top">   
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="welcome">
    <h1>Bienvenue</h1>
</div>