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

Question

我有两个div，一个嵌套在另一个内部。父元素具有定义的宽度/高度。如何仅使用CSS将子div显示在父元素上方（在外面）?

编辑：抱歉，也许我应该澄清一下，我的意思是“在z轴上方”。是的，我已经尝试过z-index。问题在于当子元素大于父元素时，会产生“框架”或“窗口”效果，剪切掉一部分div。

- zacharyliu

Answer 1

在父级div上设置overflow: visible;。

#parent {
    overflow: visible;
}

根据提问者的更新进行了修改。

- sixthgear

---

你有其他解决方案吗？因为需要使用属性 overflow: hidden。 - huykon225

Answer 2

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

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

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

- Tyler Carter

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;
}

- resopollution

Answer 4

如果您确定需要这样做，那么尝试在子元素上添加margin-top: -100px;或者所需的像素数，以使其显示在上方。

- Nico Burns

Answer 5

与Chacha所说的类似，您应该将父元素设置为相对定位，将子元素设置为绝对定位，然后将子元素的top属性设置为-100px。

父元素是否设置了overflow:hidden？这可能会妨碍您的努力。

- skybondsor

Answer 6

您可以为父元素设置负边距，通过填充进行偏移 - 例如，margin-left: -100px; padding-left: 100px。这将使您在左侧获得100像素的重叠空间，使子元素仍然位于顶部。

- fuzzy marmot