Question

我想将div放在图片上方，但是我不知道如果设置z-index属性，为什么它总是在该图片下

我的代码喜欢：

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="z-index: -1;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; margin-top: -680px"></div>
</main>

有两个问题：

我想将container-div向上移动，所以我使用“ margin-top：-680px”，680px是图像高度。还有其他可选解决方案吗？
如何将container-div移动到图像上方？

Answer 1

使用相对定位可以使用z-index。然后，您也可以使用top，它比我的经验中的负余量要强一些。

默认定位是static，不符合z-index。

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="position: relative; z-index: 0;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; position: relative; top: -680px; z-index: 1"></div>
</main>

Answer 2

将页边距更改为负值不会使图像向上移动，只会使上述元素更近。

要让div首先出现...就把它放在第一位。我已经附加了一个代码片段来显示工作示例。

//Previously named HomeController.
public class ChildNodeSelectionPageController : RenderMvcController

为什么div在图片下

2 个答案: