使用CSS在父元素上显示子元素

Question

我有两个div，一个嵌套在另一个里面。父元素具有定义的宽度/高度。如何仅使用CSS将父级div显示在父级之上（在其之外）？

编辑：对不起，也许我应该澄清一下，我的意思是“沿着z轴”。是的，我已经尝试过z-index。我的问题是，当子元素大于父元素时，它会产生“框架”或“窗口”效果，从而切断部分div。

Answer 1

在父div上设置overflow: visible;。

#parent {
    overflow: visible;
}

更改以反映提问者的更新。

Answer 2

您可以使用位置定义将其相对或绝对地放置在页面上。 IE：

要在上面直接显示，您可以在此语句中将100px替换为子框的大小。

.child{
    position: relative;
    top: -100px;
}

Answer 3

这样做：

.child { 
position: absolute; 
margin: -100px;
}

使用position：absolute将摆脱孩子向上移动时留下的空白空间。

编辑 - 阅读更新后：position：absolute仍然适用于这种情况。它让孩子离开父母。然后使用边距将其定位到您想要的位置。

通过这种方式，您可以让孩子比父母更大，也可以让孩子更大。

.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}

Answer 4

如果您确定需要这样做，请尝试添加

margin-top：-100px;在子元素上或者需要很多px才能使它出现在上面。

Answer 5

与Chacha所说的相似，你应该给父母一个亲戚的位置，给孩子一个绝对的位置，然后给孩子顶：-100px。

父级是否将溢出设置为隐藏？这可能会妨碍你的努力。

Answer 6

您可以为父元素设置负边距，按填充偏移 - 例如，margin-left：-100px; padding-left 100px。这将给你100磅左边的孩子可以重叠并仍然在顶部。