如何让 div 粘在另一个元素上答案

【问题标题】：How do I make a div stick to another element如何让 div 粘在另一个元素上
【发布时间】：2011-07-28 22:50:36
【问题描述】：

我正在制作一个投票系统。当用户单击带有“投票”类的链接时，会出现一个投票框，就像单击的链接一样。目前看起来是这样的：

我的问题是，如果页面滚动，那么投票框的位置不正确。我希望它始终显示在链接下方，即使页面滚动也能坚持链接。

我的容器是这样设计的：

#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。

【问题讨论】：

标签： javascript jquery html css positioning

【解决方案1】：

更改#vote_container 位置以绝对解决您的问题吗？ http://jsfiddle.net/xkNqG/9/

编辑： 此外，我在 css 中添加了 display:none 并在函数中添加了 $('#vote_container').show()

【讨论】：

完美 - 谢谢（我已经尝试过了，但在我的沙盒环境中，容器被放置在页面内容中并且无法正常工作）。
如果我能建议的话。添加一个正文单击事件以隐藏#vote_container，以防“X”对您的用户来说太难使用。

【解决方案2】：

#vote_container 不应该是“位置：固定”，因为 ngen 说它应该是“位置：绝对”here is my fiddle 我简化了你的 CSS（出于临时目的）只是为了帮助找到问题的根源并添加更多文本，以便小提琴实际演示滚动问题。

【讨论】：

【解决方案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 标签设置为您需要的设计，但这应该可以。

【讨论】：

【解决方案4】：

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

【讨论】：