css 相对于包含文本的div的高度定位某些内容

vuktfyat 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(162)

我正在尝试创建一个按钮，当用户将鼠标悬停在该按钮上时，该按钮下方会出现一个弹出窗口。
所需经费如下：

按钮的大小与弹出窗口的大小无关
弹出窗口始终与按钮底部保持固定距离
弹出窗口不会干扰任何元素的位置（因此是绝对位置）
弹出窗口相对于按钮居中

这里有一个图像来代表这一点。我现在的尝试如下。

第一个
当前，我的代码执行以下操作：

这是此设置所需的效果。问题是，弹出窗口是相对于其自身高度定位的。

.button-container .popup {
    ...
    -webkit-transform: translate(-50%, 110%);
    ...
}

这意味着，在较小的屏幕上，我将得到以下不希望的行为：

如果<button>在其上方，我希望弹出窗口相对于高度定位。
我会很感激任何帮助如何做到这一点。
非常感谢- Oli

css

来源：https://stackoverflow.com/questions/65013936/position-something-relative-to-the-height-of-a-div-containing-text

2条答案

按热度按时间

3phpmpom1#

绝对定位可以使用top，left，right和bottom来相对于父容器定位元素。这是您的代码片段所缺少的。
此外，在悬停时使用transition而不是animation。当从状态A切换到状态B时，它们往往更容易使用，反之亦然。
在下面的代码片段中，我把popup-positioner放在button-container的底部，并赋予它一个padding-top。这个填充将是弹出窗口和按钮之间的间距，应该根据您的喜好进行调整。这意味着按钮和弹出窗口之间的间距将始终是相同的。
这样做的原因是为了确保当鼠标悬停在按钮上时，无论何时将鼠标从按钮移动到弹出窗口，弹出窗口都不会消失。
使用white-space: nowrap;可防止句子换行。如果您确实需要在句子中换行，请使用<br>标记来指示句子的换行位置。
第一个