为什么我的 CSS 工具提示会将其他内容推下?

发布于 2024-08-27 03:00:49 字数 220 浏览 8 评论 0原文

我有一个 CSS 工具提示,CSS3 淡入,z 索引设置为 999。当我将鼠标悬停在链接上时,工具提示本身会将我的其他内容向下推,它应该位于上方,而不是内联,尽管我使用了span 并将其转换为块..

这里 是我想要的示例,我怎样才能阻止它向下推内容?

谢谢。

I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..

Here is an example of what I'm going for, how can I stop it from pushing the content down?

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

假装不在乎 2024-09-03 03:00:49

Display:block 不会从页面流中取出元素,它只是将其推到自己的新行上。使用 position:absolute - 正如其他海报所推荐的 - 应该适合你。 Position:absolute 将为浏览器窗口整体设置一个位置(例如 top:0px; left:20px;),除非有一个带有 position:relative 的父级 设置(然后将成为参考点)。第二种类型的示例是将链接定位在给定内容 div 中距右侧正好 30 像素的位置 - 无论该 div 放置在页面上的哪个位置。

Position:relative 可用于相对于自然页面流中的原始位置定位元素,并在该元素本来所在的位置留下一个空间。 Position:fixed 可用于页面滚动时不应移动的元素(例如固定导航栏、页面品牌或页脚)。 Position:static 是默认仓位设置,当您需要覆盖其他仓位类型时应使用。

如果您在另一个元素中使用跨度作为工具提示文本 - 您可能需要将父元素设置为 position:relative,并将内部跨度设置为 position:absolute< /代码>。您需要设置顶部和左侧值来调整工具提示文本的准确位置(即父元素的上方或下方、左侧或右侧)。

我希望这有帮助。

Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.

Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.

If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).

I hope this is helpful.

喵星人汪星人 2024-09-03 03:00:49

工具提示的绝对位置(将容器的位置设置为relative,绝对位置将相对于容器)。

Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).

蘸点软妹酱 2024-09-03 03:00:49

你确定工具提示CSS位置值是绝对的吗? (或者至少不是静态的)。

Did you make sure the tooltip css position value it absolute? (or at least not static).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文