Question

基本上我想要这样做，但这不起作用。如何在不必将其移动到DOM中的其他位置的情况下实现所需的结果？

<div id="parent">
  <div id="child">
  </div>
</div>

#parent {
  z-index: -1
}
#child {
  z-index: 999999;
  position: absolute
}

Answer 1

这是：

#parent {
    position: relative;
    z-index: 1;
}

#child {
    position: relative;
    z-index: 5;
}

Answer 2

默认情况下，Child始终位于父级之上;
<input>需要非静态<input type="file">属性才能正常工作。

Answer 3

尝试在父级上设置relative位置，并在子级上设置absolute位置，并将偏移值设置为0。

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Answer 4

1。）父母需要position: relative（或固定或绝对）

2。）孩子需要position: absolute并定义宽度/高度，和/或根据需要选择上/下/右/左设置。

在这个简单的配置中，你根本不需要任何z-index - 孩子在父母之上。在更复杂的情况下，您可以使用z-index。

#parent {
  position: relative;
  background: blue;
  width: 600px;
  height: 500px;
}
#child {
  position: absolute;
  background:red;
  width: 400px;
  height: 300px;
  left: 100px;
  top: 100px;
  }

<div id="parent">
  <div id="child">
  </div>
</div>

让孩子拥有比父母更高的z指数

4 个答案: