Z指数问题。欢迎致电Bootsrap导航栏中心

Question

我想使用bootstrap导航栏，我想在导航栏的中心显示欢迎信息。我将其转换为HTML：https://jsfiddle.net/DTcHh/22779/

＆＃13;

＆＃13;

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

body{
  padding-top: 87px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但欢迎信息永远不会显示。如果我把一个高z-index放在欢迎课上，那么汉堡包菜单就会出现问题......我怎么能得到这个呢？

提前致谢

Answer 1

第二版

由于the different stacking contexts，我们无法在导航栏之外放置div并将此div放在导航栏及其项目之间：

  

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

第一版

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

2. 使用position: absolute;属性。

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

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

＆＃13;
＆＃13;
@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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;