本文介绍了Css：将嵌套元素定位在父元素边界之外一点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个div，一个嵌套在另一个里面。根据页面设计，嵌套的div需要显示在父div的顶部，如：
(来源：cloudfront.net)
我已经为这两个元素编写了css代码，并在嵌套的div上使用负上边距来尝试模拟所需的效果。但是，嵌套div的顶部10px左右将被截断，而不是出现在父级的边界之外，如下所示：
(来源：cloudfront.net)
我不想绝对定位元素，因为此页面的目标是它具有响应性。
div的HTML：
<div class="container-div">
<div class="child-div">
...
</div>
</div>
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;
}
推荐答案
您不需要将position:absolute应用于嵌套的div。
和margin可能不是这种情况下的最佳做法。
position:relative添加到嵌套的div中，并将其top设置为您想要的任意数字。在您的情况下，它可能是负的。
签出this Fiddle.
这篇关于Css：将嵌套元素定位在父元素边界之外一点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！