使用 z-index 将 div 与图像重叠答案

【问题标题】：Overlapping a div with an image using z-index [duplicate]使用 z-index 将 div 与图像重叠
【发布时间】：2014-10-04 18:39:52
【问题描述】：

CSS 动画在图像后面连续播放。当图像未加载时，它将显示，但加载时，图像将与动画重叠。我正在使用 z-index 来实现这一点，但它不起作用。

图像应使用 z-index 属性隐藏加载动画。

注意：我无法使用任何 javascript 解决方案来隐藏加载动画并在图像加载后显示它。

CSS / HTML / 演示

.leftprev {
    overflow:auto;
    position:absolute;
    height:99%;
    width:85%;
}
.loadingslide {
    z-index: 50; /* Loading div's z-index */    
}
.spinner.big {
    display: block;
    height: 40px;
}
.spinner {
    bottom: 0;
    display: none;
    font-size: 10px;
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 60px;
}
.spinner.big > div {
    width: 6px;
}
.spinner > div {
    animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
    background-color: #333;
    display: inline-block;
    height: 100%;
    width: 6px;
}
a {
    color: #470a09;
    text-decoration: none;
}
.slideshow .slidebro .leftprev #slideshowpic {
    display: block;
    margin: 0 auto;
    width: auto;
    z-index: 100; /* image's z-index */    
}

<div class="leftprev">
    <div class="loadingslide"> <!-- Loading Animation div (should be running in background of the image) -->
        <div id="tracking" class="spinner big">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
        <a id="targetslide" target="_blank" title="Click to view fit to screen" href="">
          <img src="http://www.placehold.it/500" alt="" id="slideshowpic" />  <!-- The image (should mask the loading animation div) -->
        </a>
</div>

【问题讨论】：

z-index 仅在元素具有诸如absolute 或fixed 之类的位置时使用。否则，它会被忽略并根据 DOM 层次结构中的位置定位元素。

标签： html css

【解决方案1】：

您必须将 position 添加到要应用 z-index 的元素。

来自 CSS 技巧：

CSS中的z-index属性控制垂直堆叠顺序重叠的元素。如，哪一个看起来好像是物理的离你更近。 z-index 仅影响具有位置的元素静态以外的值（默认值）。

http://css-tricks.com/almanac/properties/z/z-index/

【讨论】：

【解决方案2】：

正确定位加载动画：

将加载 div 放在容器内
将容器设置为position: relative，以便加载 div 相对于它定位

图片加载时隐藏加载动画：

加载的div给定z-index: 1
图像被赋予position: relative，因此它可以具有z-index属性
图片是z-index: 2，会重叠

在此示例中，图像是容器宽度的一半，您可以看到它如何与加载 div 重叠。

CSS / HTML / 演示

html, body {
    height: 100%;
    margin: 0;
}
.content {
    height: 500px;
    width: 500px;
    background: #e91e63;
    margin: 0 auto;
    position: relative;
}
.content img {
    z-index: 2;
    position: relative;
    width: 250px;
    height: 500px;
}
.loading {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 1em;
    padding: 20px;
    background: #FF0;
    text-align: center;
    font-weight: bold;
    z-index: 1;
}

<div class="content">
    <div class="loading">I am loading</div>
    <img src="http://www.placehold.it/250X500" />
</div>

【讨论】：