在引导程序<nav>顶部显示图像

Question

我在这里设置了一个JSFiddle，显示当前正在发生的事情：http://jsfiddle.net/YX7T6/1/

这是代码：

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

我正试图让图像显示在导航的顶部，而不是像现在这样显示在导航后面。我尝试将图像的z索引更改为更高的值，但没有任何更改。我下一步该怎么做？

Answer 1

正如前面提到的其他答案一样，z-index只适用于具有position的元素。将z索引应用于没有位置的元素将被忽略。

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

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

然而，在这种特定的情况下，与其扰乱负利润，不如做得更简单：

img { 
  position: absolute; 
  top: 0;
}

Answer 2

只需将类似position:relative;的position添加到元素中
如果你计划控制它的z-index属性

小提琴

Answer 3

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

http://jsfiddle.net/YX7T6/8/