html - 为什么在我为它们设置相对绝对位置后，浮动对内部 div 不起作用？

Question

<style>
    div#Header{ height:100px ;background-color: #003333;position: relative;} 
    div#LoginBox {float : right;background-color: palegreen;position: absolute }
</style>

<div id="Header" background="bg_img/header.jpg"> 
    <div id="LoginBox">
        <form action="CheckLoginCredentials" method="post">
            <table style="height : 50px">
                <th align="left">
                    LOGIN
                </th>
                <tr>
                    <td> Username :</td>
                    <td>Password :</td>
                </tr>
                <tr>
                    <td><input type="text" name="uname"  ></td>
                    <td><input type="password" name="pwd" /></td>
                    <td><input id="submit" type="submit" value="Submit"></td>
                <tr>
                    <td align="left" colspan="2">
                        Not Registered? Register <a href="RegistrationPage.jsp" style="text-decoration: none "> Here</a>
                    </td>
                </tr>
            </table>
        </form>
    </div> 
</div> 

Answer 1

您必须使用：

position:absolute; right: 0;

不需要 float:right 绝对定位

并确保父元素设置为 position:relative;

Answer 2

我停用了绝对位置，所以现在登录浮动正确：http: //jsfiddle.net/David_Knowles/yxFZ2/

#LoginBox {
float : right;
background-color: 
palegreen;
/* position: absolute; */ 
}

添加position:relative;给出了一个上下文，position:absolute但同时推翻了浮动声明：

我更喜欢使用浮动而不是绝对定位，因为其他元素能够对它们做出反应并相应地进行调整。绝对定位通常需要在页面的其他地方进行更多编码，并且通常不太灵活，