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-index更改为更高的值，但没有任何改变。我接下来应该尝试什么？

Answer 1

只需将position position:relative;添加到您的元素中即可如果你打算控制它的z-index属性

fiddle

Answer 2

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

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

Answer 3

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

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

将使浏览器识别z-index属性，并将图像放在导航菜单上方。将来，如果您无法识别z-index的问题，您应该做的第一件事就是检查相关元素是否有位置。

但是，在这种特殊情况下，可能更容易做到：

img { 
  position: absolute; 
  top: 0;
}

在bootstrap <nav> </nav>之上显示图像

3 个答案: