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

vuktfyat  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(174)

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

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

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

第一个
当前,我的代码执行以下操作:

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

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

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

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

3phpmpom

3phpmpom1#

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

2g32fytz

2g32fytz2#

这是一个非常简单快捷的解决方案。将始终保持弹出在按钮下并居中。即使你不知道弹出的宽度。
我创建了新的ID,但你可以自由更改它。
您也可以使用display: none; &然后当悬停display: block;作为不透明度的替代。
第一个

相关问题