是否可以仅使用样式将一个元素相对于另一个动态大小的元素定位？

Question

如果某些维度是动态的，是否可以仅使用CSS样式将一个元素相对于另一个特定元素定位？

我知道我可以轻松地使用jQuery做到这一点，但我正试图将所有内容都推送到样式表中，而不是依靠javascript。

这里的代码或多或少地做了我想要完成的事情，虽然我想摆脱javascript并仍然具有相同的效果：

http://jsfiddle.net/EaHU7/

内容：

<div id="reference">
    Some text - lorem ipsum, or short, shouldn't matter.  See CSS
</div>
<div id="relative">
    Relative
</div>

CSS：

div#reference {
    min-height:200px; /* could be thousands of pixels */
    width:500px;
    padding:1em;
    border-style:solid;
    border-width:1px;
}

div#relative {
    width:50px;
    height:50px;
    padding:1em;
    background:orangered;
    border-style:solid;
    border-left-style:none;
    border-width:1px;
}

JS：

var reference = $("div#reference");
var refPos = reference.offset();
var refWidth = reference.outerWidth();
var refHeight = reference.outerHeight();

var relative = $("div#relative");
var relHeight = relative.outerHeight();

relative
    .css({
        "position":"absolute",
        "left":(refPos.left + refWidth) + "px",
        "top":(refPos.top + refHeight - relHeight) + "px"
    })
    .show();

截图：

Answer 1

是。有很多方法可以做到这一点。您可以通过将橙色方块放在文本div中并将其正确的值设置为“-50px”并将其底部值设置为“0px”来实现绝对定位

    div#reference {
        position: relative;
    }

    div#relative {
        position: absolute;
        right: -50px;
        bottom: 0px;
   }

和您的HTML一样：

    <div id="reference">
    Some text - lorem ipsum, or short, shouldn't matter.  See CSS

<div id="relative">
    Relative
</div>
</div>

尝试这样的事情。无论参考div的大小如何，橙色方块应始终保持在底部和右侧。