基于相对位置的子节点的父节点高度

Question

css是一个不可思议的东西，除了当你被阻塞，你还没有你的ahaha时刻

。

今天我有麻烦缩放高度我的父div包含一个相对定位元素到适当的高度。这是因为子节点正在使用top属性。

现在我知道top是如何工作的相对定位元素，我明白为什么它不包含适当的高度值。

我想知道的是:
是否可以在父元素的高度中包含这个top属性而不切换到padding或margin ?"

下面是我的代码: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:而不是设置margin-top:。这将导致父div适当地调整自己的大小。

Answer 2

当你指定"top"时，你将始终移动对象而不影响父元素的高度。这意味着，如果你想影响它的高度，你必须移动它的外边距。

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

Answer 3

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

Answer 4

如果你想用jquery传递它

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

我在这里为你分叉了一个CSSDeck