Table header as offset parent for absolute positioned box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Table header as offset parent for absolute positioned box

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">
.relative {<!--  w  w w .  ja  v a  2s  . com-->
   position:relative;
   border:2px solid Chartreuse;
}

th {
   position:relative;
   border:2px solid yellow;
   display:block;
}

#absolute {
   position:absolute;
   top:0;
   left:100px;
   width:201px;
   border:2px solid blue;
}
</style> 
 </head> 
 <body> 
  <div class="relative"> 
   <p>Lorem ipsum dolor</p> 
   <table border="1"> 
    <tbody> 
     <tr> 
      <th>Lorem ip 
       <div id="absolute">
         Lorem ipsum dolor sit amet, c 
       </div> </th> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials