本文介绍了Css:将嵌套元素定位在父元素边界之外一点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个div,一个嵌套在另一个里面。根据页面设计,嵌套的div需要显示在父div的顶部,如: (来源:cloudfront)
我已经为这两个元素编写了css代码,并在嵌套的div上使用负上边距来尝试模拟所需的效果。但是,嵌套div的顶部10px左右将被截断,而不是出现在父级的边界之外,如下所示: (来源:cloudfront)
我不想绝对定位元素,因为此页面的目标是它具有响应性。
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:将嵌套元素定位在父元素边界之外一点
发布评论