Question

我看过几个这样的帖子，我没有找到任何专门针对我遇到的问题的东西（也许我搜索不够，请原谅我！）。

无论如何，我基本上需要我的孩子div来定位父div。这里有一个问题，孩子必须嵌套在父div 中，例如：

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

我的父母基本上是一个移动的块（你可以用箭头键移动），孩子基本上是父母的属性，并且应该随之移动，但也可以移动它。

这可能吗？我也想这样做，而不必为孩子写一个单独的动作代码。

Answer 1

您可以使用此CSS将子项挂钩为父级的完整大小（将覆盖父级背景）：

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

工作演示，显示您可以移动父级和子级覆盖它：http://jsfiddle.net/jfriend00/XGU4w/

或者，如果您只有一个孩子，那么只需将子高度和宽度设置为100%，然后在父级上设置大小。

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

工作演示：http://jsfiddle.net/jfriend00/s89a3/

Answer 2

试试这个小提琴：http://jsfiddle.net/sNW8W/

您只需要为子元素提供更高的z-index。前一个答案的代码不起作用，不提供z-index。请记住：只有带有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子级高于父级

2 个答案: