Question

我已创建此表单：https://radlvoo.de/jans-testplatz/

但我希望覆盖整个表格。我已经google了，并试图使用这个CSS样式：

＆＃13;

GetName

＆＃13;

z-index: 500;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;

＆＃13;

但遗憾的是它不起作用......我怎样才能创建一个从表格顶部到表格底部以及表格本身之上的叠加层？

亲切的问候

Answer 1

如果要创建需要添加位置：绝对的叠加层。而你的容器应该是 position：relative 。例如：

  .container {
    position: relative;
  }
  .child {
    z-index: 500;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;
  }

Answer 2

您展示的示例CSS有点脱离了上下文，但假设叠加层已经过了，那么您还需要将其设为position: absolute。您还需要将form设置为position: relative，如下所示：

＆＃13;

form {
  position: relative;
}

.overlay {
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  position: absolute;
}

＆＃13;

<form>
  <input /><br />
  <input /><br />
  <button type="button">Submit</button>
  <div class="overlay"></div>
</form>

＆＃13;

请注意，width和height在这种情况下无关紧要，因为您正在指定top，left等。

上面的颜色叠加形式？

2 个答案: