javascript - 没有绝对值的弹出按钮

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(使用 jquery)设置为出现在它旁边。请记住，由于我之前有动态文本，因此它没有固定的固定位置。

Answer 1

为什么不像 dropbox 那样将按钮和弹出窗口包装在 position: relative; 定位元素中？相对定位元素将随动态内容一起流动，但其中的 position: absolute; 元素将自动相对于包装器位置。这比尝试通过 jQuery 弄明白要简单得多。

更新

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