为什么我的CSS工具提示会压低我的其他内容?

Kyl*_*yle 3 html css z-index tooltip

我有一个CSS工具提示,其中CSS3淡入,z-indexs设置为999。当我将鼠标悬停在链接上时,工具提示本身会将其他内容向下推,尽管我使用了一个跨度并将其转换为块。

是我要做什么的一个示例,如何阻止它压低内容?

谢谢。

rek*_*o_t 5

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


小智 5

Display:block不会从页面流中删除元素,它只是将其推到自己的新行中。position:absolute按照其他海报的建议使用-应该可以为您工作。 Position:absolutetop:0px; left:20px;在整个浏览器窗口中设置一个位置(例如),除非有一个已position:relative设置的父对象(该父对象随后将成为参考点)。第二种类型的示例是将链接定位在给定内容div中距右侧正好30px的位置-而不管该div在页面上的位置。

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

如果您在另一个元素内的工具提示文本中使用跨度,则可能需要将父元素position:relative设置为,并将内部跨度设置为position:absolute。您需要设置顶部和左侧的值,以调整您的工具提示文本恰好位于何处(即,父元素的上方或下方,左侧还是右侧)。

我希望这是有帮助的。