我有一个CSS提示框,使用CSS3淡入效果,z-index设置为999。当我悬停在链接上时,提示框会将其他内容向下推,而不是覆盖在上方,尽管我已经使用了span并将其转换为块级元素。
这里提供了一个示例(点击此处),请问如何防止它把内容往下推?
谢谢。
这里提供了一个示例(点击此处),请问如何防止它把内容往下推?
谢谢。
display:block
并不会将元素从页面流中移除,它只是将其推到自己的新行。使用position:absolute
- 正如其他帖子所建议的 - 应该适合您。除非有一个具有设置为position:relative
的父元素(然后它将成为参考点),否则position:absolute
将为浏览器窗口整体设置位置(例如top:0px; left:20px;
)。第二种类型的示例是在给定内容div内精确定位链接距离右侧30像素 - 无论该div放置在页面的哪个位置。
position:relative
可用于将元素相对于其在自然页面流中的原始位置进行定位,并留下一个空间,其中该元素将被放置。 position:fixed
可用于不应在页面滚动时移动的元素(例如固定导航栏、页面品牌或页脚)。 position:static
是默认的位置设置,应在需要覆盖另一种位置类型时使用。
如果您在另一个元素中使用span作为工具提示文本 - 您可能希望将父元素设置为position:relative
,并将内部span设置为position:absolute
。您需要设置一个上和左的值来调整您的工具提示文本确切落在哪里(即在父元素上方或下方,向左或向右)。
希望这有所帮助。
relative
,则绝对位置将相对于容器而言)。