引导 z-index 不工作

Question

我想建立一个由 5 张图片组成的主页，分别是左上、右上、左下、右下和居中。居中的图像必须稍微位于其他图像的边缘之上。 margin-top: -80px 为上边缘解决了这个问题。然而， margin-bottom: -80px 将图像置于其他图像下方，尽管他的 z-index 高得多。

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就可以了。

More info 在 z-index

Updated Fiddle

Answer 2

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

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

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

引导 z-index 不工作

boostrap z-index not working

css

twitter-bootstrap

overlay

z-index

Updated Fiddle