如何製作一個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。

來源

2011-07-28 Muleskinner

是否將#vote_container位置更改爲絕對解決您的問題？ http://jsfiddle.net/xkNqG/9/

編輯： 此外，在CSS我加display:none和功能附加$（ '＃vote_container'）顯示（）

來源

2011-07-28 14:38:05 ngen

完美 - 謝謝（我已經嘗試過，但是在我的沙箱環境中，容器被放置在頁面內容中而不工作）。 – Muleskinner

如果我可以建議。如果您的用戶使用「X」太困難，請添加主體點擊事件以隱藏#vote_container。 – ngen

謝謝 - 好主意，會這樣做 – Muleskinner

#vote_container不應該是'position：fixed'，因爲ngen說它應該改爲'position：absolute'here is my fiddle我簡化了你的css（僅用於臨時目的），以幫助找到問題的根源並添加更多文本，以便小提琴實際上會展示滾動問題。

來源

2011-07-28 14:35:12 pat8719

謝謝你的回答 - 現在完美地工作 – 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標籤你所需要的設計，但這應該工作。

來源

2011-07-28 14:47:04 qw3n

爲什麼不使用jQuery工具提示插件http://bassistance.de/jquery-plugins/jquery-plugin-tooltip，並按照自己想要的樣式對其進行增強。它已經處理了定位，並且可以在其中包含文本或標記。

來源

2011-07-28 14:50:36 nickytonline

如何製作一個div貼到另一個元素

回答

相關問題