Html CSS：将嵌套元素放置在稍微超出父元素边界的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14409067/
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
CSS: position nested element slightly outside of parent element's bounds
提问by Kevin Whitaker
I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear to be "on top of" the parent div, as in:
我有 2 个 div，一个嵌套在另一个里面。根据页面设计，嵌套 div 需要出现在父 div 的“顶部”，如下所示：
I've got the CSS coded for both elements, using a negative top margin on the nested div to attempt to simulate the desired effect. However, instead of appearing outside of the parent's bounds, the nested div's top 10px or so are getting cut off, as in:
我已经为这两个元素编写了 CSS，在嵌套的 div 上使用负上边距来尝试模拟所需的效果。然而，嵌套 div 的顶部 10px 左右被截断，而不是出现在父边界之外，如下所示：
I don't want to position the element absolutely, because a goal for this page is that it be responsive.
我不想绝对定位元素，因为此页面的目标是响应。
HTML for divs:
div 的 HTML：
<div class="container-div">
<div class="child-div">
...
</div>
</div>
CSS for the divs:
div 的 CSS：
.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}
回答by
You don't need to apply position:absoluteto the nested div.
您不需要应用position:absolute到嵌套的div.
And marginprobably wouldn't be the best practice in this case.
margin在这种情况下，可能不是最佳实践。
Just add position:relativeto the nested div, and set it's topto any number you want. In your case, it would probably be negative.
只需添加position:relative到嵌套的div，并将其设置top为您想要的任何数字。在你的情况下，它可能是负面的。
Check out this Fiddle.
看看这个小提琴。
回答by Play Mobil
overflow: hiddenon the parent would have done it perfectly !
overflow: hidden在父母身上会做得很完美！
