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

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 的大小是多少，橙色方块都应始终位于底部和右侧。