CSS 绝对位置对齐答案

【问题标题】：CSS absolute position alignmentCSS 绝对位置对齐
【发布时间】：2010-11-19 11:42:59
【问题描述】：

我的网站上有一个登录表单，当用户单击按钮时会显示该表单。它是一个浮动在其他内容上的 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：

signinbox {背景颜色：#C1DEEE; 填充：10px； z-索引：1；位置：绝对;顶部：66px； }

是否可以仅在 CSS 中执行此操作？

谢谢

【问题讨论】：

您可以为该部分添加 HTML 标记吗？这将使回答您的问题变得非常简单。
谢谢，我已将其添加到我的原始帖子中。

标签： css popup position absolute

【解决方案1】：

将登录信息包装在另一个 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; 
}

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

【讨论】：

刚刚意识到，我需要使用绝对，所以它浮动在其他元素之上。
也尝试改变你的位置：在 CSS 中的绝对到相对。稍微玩一下可能会很棘手，但只要有一点耐心，您就会得到它。
当我将它设置为相对时，它不会“浮动”在其他元素上，它只是将它们推开。我希望它出现在所有其他元素之上而不移动任何东西。
谢谢，它定位了文本，而不是背景。背景部分保持原样，文本移动。我尝试按 x 和 y 定位，但在调整浏览器大小时它会出错。
将背景移到内部div中，或者在外部div中添加margin/padding以适应

【解决方案2】：

我想你可以试试

浮动：右

或

文本对齐：右

【讨论】：

【解决方案3】：

将登录的东西放在包含登录按钮的 div 中。

使容器位置：相对。

然后给出登录的东西位置：absolute;右：0；。

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

【讨论】：

谢谢，我正计划有一个 noscript 标签和一个替代品。还不如让使用 javascript 的人看起来很漂亮:)

【解决方案4】：

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

<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;  
}

谢谢，阿伦·克里希南

【讨论】：