为什么我的 CSS 工具提示会将其他内容推下?
我有一个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
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. Usingposition:absolute
- as recommended by other posters - should work for you.Position:absolute
will set a position (such astop:0px; left:20px;
) to the browser window overall unless there is a parent withposition: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 toposition: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.
工具提示的绝对位置(将容器的位置设置为
relative
,绝对位置将相对于容器)。Absolute position the tooltip (set the container's position to
relative
and the absolute position will be relative to the container).你确定工具提示CSS位置值是绝对的吗? (或者至少不是静态的)。
Did you make sure the tooltip css position value it absolute? (or at least not static).