如何将div粘贴到另一个元素上

Question

我正在制作一个投票系统。当用户点击带有“投票”类的链接时，会出现一个投票框，只显示所点击的链接。现在看起来像这样：

我的问题是，如果滚动页面，则投票箱定位不正确。我希望它总是出现在链接下方，即使页面滚动也要坚持链接。

我的容器的样式如下：

#vote_container {
    position: fixed;
    height: 82px;
    min-height: 83px;
    background-color: #e7edf3;
    border: 3px solid #d3d6d8;
    border-radius: 10px;
    left: 40%;
    margin-top: 6px;    
    padding: 10px;    
    text-align: left;
    top: 60%;
    z-index: 199;    
}

这是我用来定位容器的代码：

var pos = $(this).offset();
var width = $(this).width();        
$("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" });

我甚至在jsFiddle创建了一个simplified example。

Answer 1

将#vote_container职位更改为绝对解决您的问题？ http://jsfiddle.net/xkNqG/9/

修改 另外，在CSS中我添加了display:none并在函数中添加了$（'＃vote_container'）。show（）

Answer 2

#vote_container不应该是'position：fixed'，因为ngen说它应该是'position：absolute'here is my fiddle我简化你的css（用于临时目的）只是为了帮助找到问题的根源并添加了更多文本，以便小提琴实际演示滚动问题。

Answer 3

如果你想要一个纯粹的CSS解决方案，试试这个。

CSS

.tipLink{
  color:#33f;
  cursor:pointer;
  position:relative;
}
.tip{
  position:absolute;
  display:none;
  top:80%;
  left:110%;
  background-color:#dddddd;
  border:1px solid black;
  width:100px;
  color:black;
  z-index:20;
  padding:3px;
  -webkit-border-radius:5px 5px 5px 5px;
  -moz-border-radius:5px 5px 5px 5px;
  border-radius:5px 5px 5px 5px;
  text-align:center;
}
.tipLink:hover .tip{
  display:block;
}

HTML

<span class="tipLink">
  Mouse Over Me
  <span class="tip">Hello World</span>
</span>

您必须将内部span标记设置为所需的设计样式，但这应该有效。

Answer 4

为什么不使用jQuery工具提示插件http://bassistance.de/jquery-plugins/jquery-plugin-tooltip，并通过按照您想要的方式设置它来增强它。它已经处理了定位，并且可以在其中包含文本或标记。