Question

我想要一个HTML元素（比如一个span或div）出现在页面上，但不占用任何空间，所以我可以打开和关闭visibility属性，没有任何动作但跨度消失。例如拿一张桌子。当我将鼠标移动时，我想在每一行显示一个“编辑”标签。但我不希望它从桌子宽度占用空间。我只是想让它“漂浮”在桌子旁边。任何想法如何实现这一目标？

我可以不使用javascript。如果仅使用CSS，我会很高兴。
我试过使用float，它不好，因为没有元素与它重叠。（我确实想要重叠。）

Answer 1

我认为你正在使用CSS工具提示。这是一个例子： http://psacake.com/web/jl.asp

Answer 2

不使用javascript我想你可以使用CSS :hover。像这样：

<style type="text/css">
#world { display: none; }
#hello:hover #world { display: block; }
</style>
<div id="hello">
    hello
    <div id="world">world</div>
</div>

演示：jsFiddle

Answer 3

div {
    position: absolute;
    left: 100px;
    top: 100px;
}

这将取div并将其相对于第一个包含static以外位置的元素定位。如果您的项目具有静态（默认）或相对位置，则会影响文档流，从而影响其他元素的位置。如果将位置设置为绝对值，则会将其从文档流中取出，并允许您将其“放置”到您喜欢的任何像素位置的页面上。：d

<强> Css position property

Answer 4

“float”属性不会将对象“浮动”到其他元素上。它将元素“浮动”到一边或另一边。

要将对象放在另一个对象上，请使用与position属性结合的z-index属性。

z-index: 500;
position: absolute;
left: 50px;
top: 50px;

Answer 5

您可以通过在表格边缘创建一个不可见的附加列来实现此效果，直到其行悬停在其上方。您希望使用visibility，而不是 display来隐藏和显示，因为visibility维护了单元格的已分配空间。

演示： http://jsfiddle.net/sCrS6/

您应该能够轻松复制代码，使其适用于您的特定页面。

此方法还具有在Web浏览器中使用比使用positioning更加一致的优势，在嵌套几个元素之后，这种方式通常会在IE行为中开始变得奇怪。

使HTML元素“浮动”

5 个答案: