为什么在为它们设置相对绝对位置后，浮点数不能用于内部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;

不需要浮动：绝对位置正确

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

Answer 2

我已取消激活绝对位置，因此现在登录右移：http://jsfiddle.net/David_Knowles/yxFZ2/

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

添加position:relative;给出position:absolute的上下文，但同时推翻了float声明：

我更喜欢使用浮点数而不是绝对定位，因为其他元素能够对其进行反应并相应地进行调整。绝对定位通常需要在页面的其他位置进行更多的编码，并且通常灵活性较差，