沒有絕對值的彈出按鈕

Question

我按照此post爲了製作一個類似於dropbox的登錄按鈕的按鈕。

更具體地說，這裏是我使用的代碼：

echo '<a href="#" id ="loginbutton"></a>'; 

    echo '<div id = "popup">'; 
    echo '<div id = "popupimage"> </div>'; 

//HTML INSIDE POPUP 

    echo '</div>'; 

    echo '<script type="text/javascript" src="jquery.js"></script>'; 
    echo '<script>'; 

    echo '$("#loginbutton").click(function(e){'; 
    echo '$("#popup").css("visibility","visible");'; 
    echo 'e.stopPropagation();'; 
    echo '});'; 

    echo '$("#popup").click(function(e){'; 
    echo 'e.stopPropagation();'; 
    echo '});'; 

    echo '$("body").click(function(e){'; 
    echo '$("#popup") . css("visibility", "hidden");'; 
    echo '});'; 

CSS：

#logbutton{ 
    top:50px; 
    left:850px; 
    position: absolute; 
    background-image: url(../images/buttons/loginbutton.png); 
    width:59px; 
    height:28px; 
} 

#popupimage{ 
    top:63px; 
    left:887px; 
    position: absolute; 
    background-image: url(../images/popupimage.png); 
    visibility: hidden; 
    width:400px; 
    height:600px; 
} 

按鈕工程和彈出窗口了。

彈出圖像的css指定圖像將出現的位置的絕對位置，正是這導致了問題。我現在希望在按鈕之前添加一些動態內容，因此我無法確切知道按鈕在哪個位置。這導致popupimage不在按鈕附近。

是否有可能知道按鈕的絕對位置，以便我可以設置popupimage（使用jquery）出現在它旁邊。請記住，因爲我之前有動態文本，所以它沒有固定的固定位置。

Answer 1

爲什麼不能做什麼的Dropbox做了，敷在position: relative;定位元素的按鈕，並在彈出的？相對定位的元素將與動態內容一起流動，但其中的position: absolute;元素將自動相對於包裝位置。這比試圖通過jQuery解決它要簡單得多。

UPDATE

# CSS 
.position_me_relative { 
    position: relative; 
} 
.within_the_relative_wrapper { 
    /* 
    This will flow inside the wrapper like a normal element. 
    For example, it will obey any padding you apply to the parent element. 
    */ 
    position: relative; 
} 
.absolute_popup_relative_to_wrapper { 
    /* As an example: 
    This will position the popup so its lower right corner 
    is touching the lower right corner of the wrapper regardless 
    of where the wrapper shows up on the page. 
    */ 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    /* 
    top and left can also be used for positioning 
    negative values can also be used and the absolute element 
    can be positioned so it appears "outside" the wrapper element 
    i think if you play around with some different values for 
    top, bottom, left and right you'll get the idea pretty quick 
    */ 
} 

# Markup 
<div class="position_me_relative"> 
    <a class="within_the_relative_wrapper"></a> 
    <div class="absolute_popup_relative_to_wrapper"></div> 
</div> 

Answer 2

見.offset()：

echo '$("#loginbutton").click(function(e){'; 
    echo 'var $target = $(this);' 
    echo '$("#popup").offset({ top: $target.offset().top, left: $target.offset().left+$target.outerWidth()}).css("visibility","visible");'; 
    echo 'e.stopPropagation();'; 
    echo '});';