do css position code for div boxes - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

do css position code for div boxes

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--from   w ww.j a va2  s .  com-->
   color:Chartreuse;
}

.box1, .box3 {
   margin:auto;
}

.box2 {
   height:100px;
   background-color:yellow;
   position:relative;
   z-index:-2;
}

.box1 {
   width:981px;
   height:100px;
   background-color:blue;
   position:relative;
   top:2em;
}

.box3 {
   width:981px;
   height:100px;
   background-color:pink;
   position:relative;
   top:-2em;
}
</style> 
 </head> 
 <body> 
  <div class="box1">
    Lorem 
  </div> 
  <div class="box2">
    Lorem ip 
  </div> 
  <div class="box3">
    Lorem ipsum 
  </div>  
 </body>
</html>

Related Tutorials