Html 使用 CSS 在父元素上方显示子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1174874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show child element above parent element using CSS
提问by zacharyliu
I have two divs, one nested inside of the other. The parent element has a defined width/height. How can I show the child div above the parent (outside of it) using only CSS?
我有两个 div，一个嵌套在另一个里面。父元素具有定义的宽度/高度。如何仅使用 CSS 在父级（在它之外）显示子级 div？
EDIT: Sorry, maybe I should clarify that I mean "above" as along the z axis. And yes, I already tried z-index. My problem is that when the child element is larger than the parent, it results in a "frame" or "window" effect, cutting off part of the div.
编辑：抱歉，也许我应该澄清一下，我的意思是沿 z 轴的“上方”。是的，我已经尝试过 z-index。我的问题是，当子元素大于父元素时，会产生“框架”或“窗口”效果，切断部分 div。
回答by sixthgear
Set overflow: visible;on the parent div.
overflow: visible;在父 div 上设置。
#parent {
overflow: visible;
}
Changed to reflect asker's update.
更改以反映提问者的更新。
回答by Tyler Carter
You could use the position definition to position it either relatively or absolutely on the page. IE:
您可以使用位置定义在页面上相对或绝对地定位它。IE：
To show it directly above you would replace 100px in this statement with the size of the child box.
要直接在上面显示，您可以用子框的大小替换此语句中的 100px。
.child{
position: relative;
top: -100px;
}
回答by resopollution
Do it this way:
这样做：
.child {
position: absolute;
margin: -100px;
}
Using position: absolute will get rid of the empty space left by the child when it gets shifted up.
使用 position: absolute 将消除孩子在向上移动时留下的空白空间。
Edit - after reading your update: position:absolute still applies for this situation too. It gets the child out of the parent. Then you use the margins to position it how you want.
编辑 - 阅读您的更新后： position:absolute 仍然适用于这种情况。它让孩子脱离了父母。然后您使用边距将其定位到您想要的位置。
This way you can make the child bigger than the parent and above it.
通过这种方式，您可以使孩子比父母大并高于它。
.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}
回答by Nico Burns
If you're sure you need to do this, then try putting
如果您确定需要这样做，请尝试将
margin-top: -100px; on the child element or however many px is needed to make it appear above.
边距顶部：-100px；在子元素上，或者需要多少像素才能使其出现在上方。
回答by skybondsor
Similar to what Chacha said, you should give the parent a position of relative and the child a position of absolute, then give the child top: -100px.
类似于Chacha所说的，你应该给父母一个相对位置，给孩子一个绝对位置，然后给孩子top：-100px。
Does the parent have overflow set to hidden? That might hinder your efforts.
父级是否将溢出设置为隐藏？这可能会阻碍你的努力。
回答by fuzzy marmot
You can set a negative margin for your parent element, offset by the padding - for example, margin-left: -100px; padding-left 100px. That will give you 100px to the left where the child can overlap and still be on top.
您可以为父元素设置负边距，由填充偏移 - 例如， margin-left: -100px; 填充左 100 像素。这会给你 100px 的左边，孩子可以重叠并且仍然在顶部。
