Почему моя регистрация не работает?

Question

По какой-то причине моя регистрация не будет работать в моем заголовке, любая помощь будет оценена.

код (в заголовке):

<header> 
    <img src="PSE.jpg" height="100" width="250" alt="Logo" /> 
    <div id="search"><input type="text" name="query" class="query" id="query" value="Search..." autocomplete="off"> 
    <input class="button" type="submit" name="submit" value="Go"></div> 
    <div id="login">Login</div> 
    <div id="register"><a href="register.html">Register</a></div>  
    <form id="user"><input type="text" name="Username" value="Username"/> 
    <input type="password" name="Password" value="password"/></form>   
    <div id="facebook"><a><img src="facebook-icon.png" height="25" width="25" alt="facebook"/></a></div> 
    <div id="twitter"><a><img src="twitter-icon.jpg" height="25" width="25" alt="twitter"/></a></div> 
    <div id="youtube"><a><img src="youtube-icon.png" height="25" width="25" alt="youtube"/></a></div> 
</header> 

CSS:

header{ 
    margin: 0 auto; 
    width: 100%; 
    height: 110px; 
    text-align: left; 
    display: block; 
    background-color:#268ACC; 
    } 

    header img{ 
    text-align:left; 
    padding-left: 10px; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    }  
    #search { 
    text-align: left; 
    position: relative; 
    left: 300px; 
    bottom: 40px; 
    } 
    #user{ 
    text-align: left; 
    position: relative; 
    left: 550px; 
    bottom: 60px; 
    } 
    #login{ 
    text-align: left; 
    position: relative; 
    bottom: 40px; 
    left: 550px; 
    margin-top:-50px; 
    } 
    #register{ 
    text-align: left; 
    position: relative; 
    bottom: 65px; 
    left: 710px;   
    } 
    #register a{ 
    list-style-type: none; 
    margin: 0px; 
    text-decoration: none; 
    vertical-align: middle; 
    } 
    #facebook{ 
    text-align: right; 
    position: relative; 
    bottom: 160px; 
    padding-right: 5px; 
    } 
    #twitter{ 
    text-align: right; 
    position: relative; 
    bottom: 160px; 
    padding-right: 5px; 
    } 
    #youtube{ 
    text-align: right; 
    position: relative; 
    bottom: 160px; 
    padding-right: 5px; 

изменения: теперь добавлены все элементы заголовка и CSS. Просто добавьте некоторые детали, потому что он хочет меня, макет заголовка в изображении с левой стороны, за которым следует панель поиска, а затем вход в систему, изображение в социальных сетях и ссылка на реестр, которую я пытаюсь исправить.

Answer 1

Becuase относительного позиционирования, то DIV будет перекрывания. Так просто добавьте Z-индекс с большим количеством как 9999 к вашей относительной позиционируется DIV, как это:

#register{ 
    text-align: left; 
    position: relative; 
    bottom: -20px; 
    left: 100px; 
    z-index: 9999;   
} 

И он должен работать красиво.

Answer 2

Вы забыли установить ширину и высоту div.

Попробуйте это:

#register{ 
    text-align: left; 
    position: relative; 
    width: 100%; 
    height: 80px; 
} 
#register a{ 
    list-style-type: none; 
    margin: 0px; 
    text-decoration: none; 
    vertical-align: middle; 
}