css - 相对于父元素垂直定位元素，但相对于视口水平定位

Question

我有这个 UI 元素，单击时会打开一个工具提示/弹出框。我希望工具提示窗口出现在 UI 元素的正下方，但在移动设备上，它应该与视口的左侧和右侧对齐，而不是在“更多...”按钮下方居中。

换句话说，我想拥有：

.tooltip {
 top: 100%; // appear right below the button
 left: 10px; // 10px *from the edge of the window*
}

有没有办法像这样混合引用？top位置是否基于父级计算，而left和right是否基于视口计算？

（顺便说一句，我知道我可以用 JavaScript 做到这一点，但我想先寻找一个纯 CSS 解决方案）

标签： css

Answer 1

到目前为止，我拥有的最佳解决方案是确保具有position: relative绝对定位工具提示的引用并在其处起作用的父级跨越视口的整个宽度。这可行，但这意味着工具提示不能只是一个可以添加到应用程序中任何位置的插入式组件，这正是我想要实现的。