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

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

我知道我可以很容易地用jQuery实现这一点，但我正试图尽可能地将所有内容都放入样式表中，而不是依靠javascript

下面的代码或多或少完成了我试图完成的任务，尽管我希望摆脱javascript，但仍然具有相同的效果：

内容：

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

JS:

截图：

---

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

您的HTML如下所示：

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

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

一些文字-lorem ipsum，或简称，应该无关紧要。参见CSS
相对的

试试这样的。无论参考div的大小如何，橙色正方形应始终位于底部和右侧

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();

    div#reference {
        position: relative;
    }

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

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

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