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

Question

我想使用 bootstrap 导航栏并且我想在导航栏中央显示欢迎消息。我这样做 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 设置为欢迎 class 汉堡菜单有问题...我怎样才能使用它？

提前致谢

Answer 1

第二版

我们不能把 div 放在导航栏外面，也不能把这个 div 放在导航栏和它的项目之间，因为 the different stacking contexts:

Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.

所以我们必须将 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>

第一个版本

.navbar-fixed-top class 具有 z-index: 1030; 属性。所以 z-index 对于 .welcome class 必须更大。
使用position: absolute;属性.
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>

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

Z-index issue. Welcome message at the center of the Bootsrap navbar

html

css

z-index

navbar

twitter-bootstrap

第二版

第一个版本