Position: absolute inside position: relative - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Relative Position

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

Description

Position: absolute inside position: relative

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
header {<!-- w w  w  . java 2  s .  c  om-->
   width:100%;
   height:41px;
   background-color:Chartreuse;
}

header p {
   margin:0;
}

footer p {
   margin:0;
}

main {
   position:relative;
   height:auto;
   overflow:auto;
   border:2px solid yellow;
}

#text {
   float:left;
   width:501px
}

#links {
   float:left;
   width:401px;
}

footer {
   width:100%;
   height:41px;
   background-color:blue;
}
</style> 
 </head> 
 <body translate="no"> 
  <header>
    Lorem ip 
  </header> 
  <main> 
   <div id="text"> 
    <p>Lorem ips</p> 
   </div> 
   <div id="links"> 
    <ul> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lorem </a> </li> 
    </ul> 
   </div> 
  </main> 
  <footer> 
   <p>Lorem </p> 
  </footer>  
 </body>
</html>

Related Tutorials