Question

我正在尝试使用Z-index将我的调查表格重叠在视差图像上（使用MateralizeCss创建）。但是，我的表格仍然在图像下面。请帮忙！ *不能提供我在xslt中的代码。任何简单的例子都将受到赞赏。

这是html代码

  <div class="parallax-container">
    <div class="parallax">
      <img src="http://materializecss.com/images/parallax1.jpg" />
    </div>
  </div>
  <div style="width:50%;margin: 0 auto ;z-index:1000;background-color:white;padding:2.5%; box-shadow: 0px 4px 5px gray, &#xD;&#xA;        -5px 4px 7px gray, 5px 4px 7px gray;margin-bottom:5%;position:absolute">
    <div style="font-size:250%;font-weight:bold">In Store Hub Trooper Feedback Form</div>
    <div style="font-size:150%;">Q number</div>
    <div>
      <input type="number" required="required" />
    </div>
    <div style="font-size:150%;">Dateeeeeeeeeeeeee</div>
    <div id="input">
      <input type="date" class="datepicker" required="required">
      </input>
      <span>
      </span>
    </div>

Answer 1

表单和图片都需要position属性。

<强> HTML

<form id="myform" class="overlap">
  <button id="button" name="button">A button</button>
  <br/>
  <input type="submit" value="submit">
</form>

<div class="box">
  Thing overlapping with form
</div>

<强> CSS

.overlap {
  position: relative;
  margin: 0 auto;
  background-color: #ccc;
  padding: 3em;
  width: 50%;
}

.box {
  position: absolute;
  top: 6em;
  right: 20%;
  background-color: #666;
  color: #fff;
  padding: 3em;
  width: 25%;
}

我为你做了一个CodePen：

在Overlapping things with z-index上查看Yvonne Aburrow（@vogelbeere）的笔CodePen。

编辑：在您使用代码更新问题之前，我添加了我的答案。

如何在视差图像上应用z-index

1 个答案: