css - 将 <div> 的右侧放在窗口的左侧

Question

我正在尝试在 HTML/CSS 中实现一个 Android 风格的侧边栏，它可以显示和隐藏自己。现在，我一直在摆弄 right和 left CSS 中的属性试图弄清楚(诚然标题中的措辞不是很好)如何将 div(侧边栏)恰到好处地放在左边，以便它完全隐藏。

一个例子:

+---+--------------+
|   |              |
| D |       B      |
|   |              |
+---+--------------+

(其中 D 是有问题的 <div>，B 是屏幕上的实际显示区域)

这可能吗？我试过了 right: 100% ，它基本上做我想做的，但它不适用于 transition因为它无法从 right: 100%; left: auto 转换, 至 right: auto; left: 0 (或者至少根据我的经验)...

非常感谢您的帮助!

编辑:我意识到我可以有一个恒定宽度的侧边栏，因此能够轻松地转换它，但我想要一个宽度未预先确定的侧边栏(证据似乎指向 JavaScript 作为唯一的选择为了访问元素的宽度)

Answer 1

您是否考虑过可以将负值放入边距这一事实？
例如，如果您的 div 宽度为 50px:

margin-left: -50px;

然后您可以使用过渡将 50 像素添加到事件的左边距。