take advantage of default top for absolutely positioned element - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

take advantage of default top for absolutely positioned element

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">
.container {<!--   w  ww .  ja  va2 s . c  o  m-->
   height:501px;
   width:301px;
   position:relative;
}

.parent {
   height:201px;
   box-sizing:border-box;
}

.child {
   height:100%;
   left:0;
   right:0;
   position:absolute;
   box-sizing:border-box;
}

.blue {
   background-color:Chartreuse;
   border:4px solid yellow;
}

.green {
   background-color:blue;
   border:4px solid pink;
}

.red {
   background-color:OrangeRed;
   border:4px solid grey;
}

.orange {
   background-color:BlueViolet;
   border:4px solid Chartreuse;
}

.violet {
   background-color:yellow;
   border:4px solid blue;
}
</style> 
 </head> 
 <body> 
  <div class="container blue"> 
   <div class="parent violet"> 
    <div class="child red"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials