Css 在引导程序顶部显示图像<；导航>；

我在这里设置了一个JSFIDLE，显示当前正在发生的事情：

代码如下：

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                CText
            </li>
        </ul>

        <div class="pull-right">
            <button class="btn btn-default btn-lg"> button1 </button>
            <button class="btn btn-default btn-lg"> button2 </button>
        </div>
    </div>
</nav>

<div class="container">
    <a href="#">
        <img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
    </a>
</div>

CText


按钮1
按钮2

---

我正在尝试让图像显示在导航的顶部，而不是像现在这样显示在它后面。我尝试过将图像的z指数改为更高的值，但没有任何改变。下一步我应该尝试什么？

只需添加

位置

如

位置：相对到您的元素

如果您计划控制它的
z-index
属性

或者，在
img
上使用
position:absolute
，并跳过
z-index
内容

如其他答案所述，
z-index
仅对具有
位置的元素有效。将z索引应用于没有位置的元素将被忽略

img { 
  position: relative; 
  z-index: 1;
}

将使浏览器识别z索引属性，并将图像置于导航菜单上方。将来，每当您遇到z-index无法识别的问题时，您应该做的第一件事就是检查所讨论的元素是否具有位置

但是，在这种特定情况下，与其处理负利润，不如简单一些：

img { 
  position: absolute; 
  top: 0;
}