CSS：让图像成为div的顶部

Question

我的HTML：

<div id="why">
    <div class="gallery clearfix">
        <img src="images/why-bg.png" class="background-why">
        <div class="gallery-inner">
            ...
        </div>
        <div class="gallery-inner">
            ...
        </div>
        <div class="gallery-inner">
            ...
        </div>
    </div>
</div>

我的CSS：

#why{
  height: 100%;
}
#why .gallery{
  height: 100%;
  width: 100%;
  position: relative;
}
#why .background-why{
  position: absolute;
  top: 0;
  left: 0;
  float: left;
}

我希望.background-why超过.gallery。但是我的代码保持在.gallery之下。我认为这张图片可以帮助您理解我的期望

Answer 1

使用.background-why类的z-index属性。

你的CSS应该是这样的：

#why{
  height: 100%;
}
#why .gallery{
  height: 100%;
  width: 100%;
  position: relative;
}
#why .background-why{
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  z-index: 1;
}

Answer 2

Z-index是你的答案。将顶部元素的z-index设置为高于背景元素的z-index

#why{
  height: 100%;
}
#why .gallery{
  height: 100%;
  width: 100%;
  position: relative;
  z-index:1;
}
#why .background-why{
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  z-index:2;
}

Answer 3

使用z-index：

#why .background-why{
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  z-index:1
}

Answer 4

根据您的需要：

1）如果你希望.background-为什么永久地超过.gallery-inner（整个区域是.gallery-inner） - jsfiddle.net/bw6ecbuy/1 /

2）如果你想要.background-为什么要在悬停时超过.gallery-inner而不是： jsfiddle.net/a8yszLsf/2 /

如果我弄错了，请发表评论。