我有两个 div,一个嵌套在另一个内部。父元素具有定义的宽度/高度。如何仅使用 CSS 将子 div 显示在父级(在其外部)之上?
编辑:对不起,也许我应该澄清一下,我的意思是沿 z 轴的“上方”。是的,我已经尝试过 z-index。我的问题是,当子元素大于父元素时,会产生“框架”或“窗口”效果,截断部分div。
overflow: visible;
在父 div 上设置。
#parent {
overflow: visible;
}
更改以反映提问者的更新。
您可以使用位置定义将其相对或绝对定位在页面上。IE:
要直接在上方显示它,您可以将此语句中的 100px 替换为子框的大小。
。孩子{ 位置:相对; 顶部:-100 像素; }
这样做:
.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;
}
如果您确定需要这样做,请尝试将
边距顶部:-100px;在子元素上,或者需要很多 px 才能使其出现在上面。
类似于Chacha所说的,你应该给父母一个相对的位置,给孩子一个绝对的位置,然后给孩子top:-100px。
父母是否将溢出设置为隐藏?这可能会阻碍你的努力。
您可以为父元素设置负边距,由填充偏移 - 例如,margin-left: -100px; 填充左 100 像素。这将给你 100px 的左边,孩子可以重叠并仍然在上面。