如何制作一个div贴到另一个元素

问题描述：

我正在制作投票系统。当用户点击一个类别为“投票”的链接时，一个投票框出现在点击链接的旁边。它看起来像这样的时刻：如何制作一个div贴到另一个元素

enter image description here

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

我的容器是风格是这样的：

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

答

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

编辑： 此外，在CSS我加display:none和功能附加$（ '＃vote_container'）显示（）

完美 - 谢谢（我已经尝试过，但是在我的沙箱环境中，容器被放置在页面内容中而不工作）。 – Muleskinner

如果我可以建议。如果您的用户使用“X”太困难，请添加主体点击事件以隐藏#vote_container。 – ngen

谢谢 - 好主意，会这样做 – Muleskinner

答

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

谢谢你的回答 - 现在完美地工作 – Muleskinner

答

如果你想要一个纯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标签你所需要的设计，但这应该工作。

答

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

如何制作一个div贴到另一个元素

相关推荐