Fixed block with negative z-index with overlapped body background - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Fixed block with negative z-index with overlapped body background

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">

html, body {
   min-height: 100%;
}
body {<!--from  w w  w  . j a v  a2s . co m-->
   position: absolute;
   background: green;
}
.sidebar {
   z-index: -999;
   position: relative;
   top: 0; right: 0;
   min-height: 100%; width: 200px;
   background: red;
}


      </style> 
 </head> 
 <body> 
  <div class="content">
    Pellentesque mollis diam at egestas lacinia. In a pharetra risus. Aenean in libero. Nam sollicitudin at erat quis maximus. Nam aliquet ornare nibh, sit amet. 
  </div> 
  <div class="sidebar"></div>  
 </body>
</html>

Related Tutorials