Drawing a div on top of the rest without using absolute positioning - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Drawing a div on top of the rest without using absolute positioning

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  <title>Lorem ipsum dolor sit </title> 
  <style type="text/css">
* {<!--from w  w  w.  j  a  v  a 2 s.  c  o  m-->
   margin:0;
   padding:0;
}

#container {
   width:961px;
   margin:0 auto;
   position:relative;
}

#login_container {
   position:absolute;
   right:0;
   width:100%;
   z-index:11;
}

#content {
   position:relative;
   z-index:0;
}
</style> 
  <!--[if lte IE 6]><style type="text/css"></style><![endif]--> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="header" class="row"> 
    <ul id="topnav"> 
     <li> <a href="#">L</a> <span> <a href="#">Lo</a> <a href="#">Lo</a> </span> </li> 
     <li> <a href="#">L</a> <span> <a href="#">Lo</a> <a href="#">Lo</a> </span> </li> 
     <li style="float: right;"> <a href="#">Lorem</a> </li> 
    </ul> 
   </div> 
   <div id="login_container"> 
    <form method="post" id="login_form"> 
     <p>Lorem ipsu</p> 
    </form> 
    <form method="post" id="create_account_form"> 
     <p>Lorem ipsum dolor s</p> 
    </form> 
   </div> 
   <div id="content">
     Lorem ipsum do 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials