Css 绝对位置对准

我在我的网站上有一个登录表单，当用户单击按钮时显示。它是一个浮动在其他内容上的div。它只占页面的一小部分（登录链接的正下方）

除了一件小事，一切都很好。它显示在登录链接的左侧对齐（我尝试了下图）

|登录|

|在这里登录|

我希望它看起来像这样（对齐到登录链接的右侧）：

|标志 在|

|在这里登录|

这是我的HTML：

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

您想与谁登录

谷歌

雅虎

其他

以及登录框的CSS：

符号盒{背景色：#C1DEEE； 填充：10px；z索引：1；位置： 绝对值；顶部：66px；}

是否可以在CSS中实现这一点

---

谢谢

我想你可能想试试

浮球：对

或

---

文本对齐：右

将符号信息包装在另一个div中，称之为内部符号，然后相对于绝对定位的外部div定位。您可能还需要设置绝对定位的外部div的宽度

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

---

如果这不起作用，为什么不在signingbox中添加一个“left”属性来设置水平位置和垂直位置呢。是否有理由不能用x和y绝对定位元素？

将“登录”内容放在包含“登录”按钮的div中

使容器位置：相对

然后在填充位置给出符号：绝对；右：0

---

顺便说一句，在这里要小心；仅仅要求Javascript登录是非常粗鲁的。很多人出于各种原因运行NoScript。

我用“主窗格”类创建了新的div。您可以调整“signinbox”的位置。通过更改“right”和“top”的值从css中删除

您想与谁登录

谷歌

雅虎

其他

.主窗格{
位置：相对位置；
}
#信号盒{
宽度：250px；
背景色：#C1DEEE；
填充：10px；
z指数：5；
位置：绝对位置；
顶部：66px；
右：0px；
}

谢谢，

---

Arun Krishnan

您能为该部分添加HTML标记吗？这将使回答您的问题变得非常简单。谢谢，我将其添加到了我的原始帖子中。我刚刚意识到，我需要使用绝对值，以便它浮动在其他元素之上。还可以尝试将您的位置：CSS中的绝对值改为相对值。稍微处理一下这个可能会有点棘手，但是你只需要一点耐心就可以得到它。当我将它设置为相对时，它不会“浮动”到其他元素上，它只会将它们推开。我希望它显示在所有其他元素的顶部，而不移动任何内容。谢谢，它定位文本，但不定位背景。背景部分停留在原处，文本移到原处。我尝试按x和y定位，但在调整浏览器大小时出现错误。请将背景移到内部div，或在外部div添加边距/填充以适应。谢谢，我正计划使用noscript标记和其他标记。对于使用javascript的人来说，最好让网站看起来漂亮：）

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}