Почему поплавок не работал для внутреннего 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; 

Нет необходимости в обращении: право с абсолютным позиционированием

И убедитесь, что родительский элемент установлен в положение: относительная;

Answer 2

Я выключил позицию абсолютного так теперь Логин плавает прямо: http://jsfiddle.net/David_Knowles/yxFZ2/

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

Добавление position:relative; дает контекст для position:absolute, но в то же время отменит объявление поплавка:

Я предпочитаю использовать плавает над абсолютным позиционированием, потому что другие элементы могут реагировать на них и соответственно корректировать их. Абсолютное позиционирование обычно требует большего кодирования в другом месте страницы и, как правило, менее гибко,