Javascript 使z索引子项高于父项

我看过好几篇这样的帖子，但我没有发现任何专门针对我所遇到的问题的帖子（也许我搜索得不够，请原谅！）

无论如何，我基本上需要我的子div将自己定位在父div之上。 不过这里有一个问题，子项必须嵌套在父div中，例如：

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

我的父对象基本上是一个移动块（可以使用箭头键移动），子对象基本上是父对象的属性，应该随父对象一起移动，但也可以在父对象上移动

这可能吗？

---

我也希望这样做，而不必为孩子编写单独的移动代码。

您可以使用此CSS将孩子固定为家长的完整尺寸（将覆盖家长背景）：

工作演示，显示您可以移动父对象，而子对象将停留在覆盖它的位置：

---

或者，如果您只有一个孩子，那么只需将孩子的高度和宽度设置为

100%

，然后在家长身上设置一个大小

#parent {height: 200px; width: 200px;}
#child {height: 100%; width: 100%;}

工作演示：

试试这把小提琴：

您只需给子元素一个更高的z索引。上一个答案中的代码不起作用，没有提供z索引。记住：只有带有position属性的元素才能使用z-index属性

#parent {
    position: relative;
    background:red;
    height:100px;
    width: 100px;
    z-index:0;
 }
#child {
     position: absolute;
     top: -10px;
     left: 25px;
     background: green;
     height: 50px;
     width:   50px;
     z-index: 10;
 }

---

默认情况下，子对象应位于父对象之上，移动父对象也会移动子对象。看起来问题出在你的实际代码中，所以你应该发布它。除非你给孩子一个绝对位置，否则我不确定你如何避免这种行为。你会拉小提琴吗？默认情况下，孩子已经在父母的上面了。您不需要使用

z-index

来强制执行该操作。这是否意味着，例如，第三个子级会自动具有3？我不知道。ThanksA

z-index

影响兄弟姐妹的相对高度。子对象始终位于其父对象之上，并且始终相对于其父容器（因此，如果其父对象位于其他对象之上，则所有子对象也将位于该容器之上）。第三个孩子没有得到一个z索引（尽管它有点像那样）。顺序由父级z顺序决定，然后是z索引设置与其他同级，如果没有子级z索引（最后一个子级位于顶部）。我同意，这是逻辑，但我在过去遇到过一些问题。当您特别声明它时，您就是save。

#parent {
    position: relative;
    background:red;
    height:100px;
    width: 100px;
    z-index:0;
 }
#child {
     position: absolute;
     top: -10px;
     left: 25px;
     background: green;
     height: 50px;
     width:   50px;
     z-index: 10;
 }