boostrap z-index无法正常工作

Question

我想建立一个主页，其中包含5个图像，左上角，右上角，左下角，右下角和居中。中心图像必须略微位于其他图像的边缘上方。 margin-top：-80px解决了上边缘问题。然而，保证金底部：-80px将图像置于其他图像之下，尽管他的z指数要高得多。

JSFiddle： https://jsfiddle.net/DTcHh/8208/

HTML

<div class="container nopadding-mobile" >
    <div class="row hometiles" >
        <div class="col-sm-4">
            <img src="http://www.nigeltomm.com/images/green_square_nigel_tomm_m.jpg" width="100%" />
        </div>
        <div class="col-sm-4 col-sm-offset-4">
            <img src="http://www.nigeltomm.com/images/green_square_nigel_tomm_m.jpg" width="100%" />
        </div>
    </div>
    <div class="row hometiles" >
        <div class="col-sm-4 col-sm-offset-4">
            <div class="logotile">
                <img src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" width="100%" />
            </div>
        </div>
    </div>
    <div class="row hometiles" >
        <div class="col-sm-4">
            <img src="http://www.nigeltomm.com/images/green_square_nigel_tomm_m.jpg" width="100%" />
        </div>
        <div class="col-sm-4 col-sm-offset-4">
            <img src="http://www.nigeltomm.com/images/green_square_nigel_tomm_m.jpg" width="100%" />
        </div>
    </div>
</div>

Answer 1

z-index仅适用于定位元素，将其更改为position:relative并且可以正常运行。

z-index

上的

More info

Updated Fiddle

Answer 2

实际上它是一个简单的解决方案。

您只需要为图像指定一个位置属性，因为z-index仅适用于定位元素。

.logotile{
    position: relative;
    width: calc(100% + 80px);
    margin: -120px -40px -120px -40px;
    z-index: 314159;
}