24

我有两个 div,一个嵌套在另一个内部。父元素具有定义的宽度/高度。如何仅使用 CSS 将子 div 显示在父级(在其外部)之上?

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

4

6 回答 6

49

overflow: visible;在父 div 上设置。

#parent {
    overflow: visible;
}

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

于 2009-07-23T22:50:33.337 回答
5

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

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

。孩子{
    位置:相对;
    顶部:-100 像素;
}
于 2009-07-23T22:43:52.070 回答
2

这样做:

.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;
}
于 2009-07-23T22:47:11.923 回答
1

如果您确定需要这样做,请尝试将

边距顶部:-100px;在子元素上,或者需要很多 px 才能使其出现在上面。

于 2009-07-23T22:42:52.260 回答
1

类似于Chacha所说的,你应该给父母一个相对的位置,给孩子一个绝对的位置,然后给孩子top:-100px。

父母是否将溢出设置为隐藏?这可能会阻碍你的努力。

于 2009-07-23T22:52:31.727 回答
0

您可以为父元素设置负边距,由填充偏移 - 例如,margin-left: -100px; 填充左 100 像素。这将给你 100px 的左边,孩子可以重叠并仍然在上面。

于 2017-01-09T20:10:02.850 回答