Question

我有一个固定在我网站底部的横幅。我想在横幅的顶部添加一本书的图片。所以我将图像放在fixed-footer-wrapper之外的div中，称为.fixed-footer-wrapper2。一切都很好，除了书还在横幅后面。我需要在横幅前面的书。我尝试了z-index，但没有把图像放在前面。那么如何让图像在前面呢？

https://jsfiddle.net/Lance_Bitner/3gz7wk4m/

.fixed-footer-wrapper2 {
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: -50px;
display: -ms-flexbox;
position: fixed;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}

Answer 1

将.fixed-footer-wrapper设置为z-index: -1;应该有效。这将使该课程在定位方面落后于其他一切。

示例：

.fixed-footer-wrapper {
    z-index: -1;
}

现在你的图像是透明的，这可能会让它看起来有点奇怪，但这应该有用。

Answer 2

您需要在.fixed-footer-wrapper上添加z-index：-1才能将其恢复。 z-index仅适用于块元素，如div;不在图像上。这里我有.fixed-footer-wrapper的更新代码。希望有所帮助！

.fixed-footer-wrapper {
      left: 0px;
      right: 0px;
      bottom: 0px;
      padding-top: 16px;
      padding-bottom: 16px;
      display: -ms-flexbox;
      position: fixed;
      -ms-flex-align: center;
      background-color: rgba(91, 172, 220, 0.95);
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      z-index:-1; 
}

如何在横幅前设置图像？

2 个答案: