工具提示的定位元素

时间:2014-03-09 11:21:01

标签: html css3 positioning

我很抱歉,如果这真的是一个新手问题 - 或者它是否非常简单......

我正在尝试制作一个仅基于CSS(无JS)的基本图像工具提示。

在这里小提琴:http://jsfiddle.net/ufs44/1/

我的问题是如何将图像与链接保持距离,以免图像模糊不清。

我真的很想用CSS制作它(稍后我会添加一些过渡)但是现在,工具提示总是隐藏下面的其他链接。

执行position:relative实际上会使整个页面“跳转”,因为它正在从display:none更改为display:block并且该元素缺少空间...

我想知道如何让工具提示显示在例如链接上方或侧面...

2 个答案:

答案 0 :(得分:1)

您需要在链接中使用position: relative;,然后绝对定位图像工具提示。

Fiddle

答案 1 :(得分:1)

  

如何将图像与链接进行距离以使其不会模糊   文本。

css position:absolute的元素使用css leftrightbottomtop

定位

评论 - http://jsfiddle.net/5W5bB/1 - 使用left

left:200px;