父亲身高基于相对定位的孩子

Question

css是一个奇妙的东西，除非你被阻止而你还没有 ahaha片刻。

今天我无法将包含相对位置元素的父div的高度缩放到正确的高度。这是因为孩子们正在使用top属性。

现在我知道top如何处理相对定位元素，我理解为什么它不包含正确的高度值。

我想知道的是：
“是否有可能将此顶级属性包含在我父级的高度而不切换到填充或边距？”

这是我的代码的小提琴：http://cssdeck.com/labs/unfeydw0
或者下面的简单代码：

HTML：

<div>
    <div class="relative">
    </div>
</div>

的CSS：

.relative {
    position: relative;
    top: 42px;
    height: 40px;
    width: 100%;
    background: red;
}

谢谢。

Answer 1

当您指定“top”时，您将始终移动对象而不会影响父级的高度。这意味着如果你想影响它的高度，你必须用边距移动它。

所以你的答案是：“不，这是不可能的”。以下是规范：http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

Answer 2

您可以在.relative之后添加一个空元素，并将其height设置为.relative top定位的元素。

Answer 3

如果你想用jquery传递它

var positionToTop = $(".relative").css("top");
$(".relative").parent().css({"top":positionToTop});

我forked a CSSDeck在这里为你

Answer 4

我发现在类似情况下对我有用的不是设置top:我设置margin-top:。这将导致父div适当地调整自身大小。