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提供一个上下文，但同时会否决浮动声明：

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

为我们设置相对绝对位置后，为什么浮点数不适用于内部div？

2 个答案: