Positioning elements using z-index - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Positioning elements using z-index

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.body {<!--  w w  w.  ja  v  a2  s.c  o  m-->
   height:100%;
   margin:0px;
   padding:0px;
   width:100%;
   overflow-x:hidden;
   overflow-y:hidden;
   background-color:Chartreuse;
   position:static;
}

.container {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   overflow-x:hidden;
   overflow-y:hidden;
   width:100%;
   margin:0;
   background-color:yellow;
}

.navbar {
   width:100%;
   margin-bottom:0;
   z-index:103;
   box-shadow:0px 4px 12px -6px blue;
   height:31px;
   background-color:pink;
   position:relative;
}

.tabs {
   width:100%;
   font-size:2.2em;
   box-shadow:0px 4px 12px -6px OrangeRed;
   z-index:102;
   position:absolute;
   height:31px;
   background-color:grey;
   top:31px;
}

.menu {
   width:7em;
   height:7em;
   position:absolute;
   left:201px;
   background-color:BlueViolet;
   z-index:2001;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="body"> 
   <div class="container"> 
    <div class="navbar">
      Lorem ips 
     <div class="menu">
       Lorem ipsum dolo 
     </div> 
    </div> 
    <div class="tabs">
      Lorem ipsu 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials