get an absolutely-positioned div to extend outside its relatively-positioned parent with overflow: auto - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Relative Position

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

Description

get an absolutely-positioned div to extend outside its relatively-positioned parent with overflow: auto

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
 </head> <!--from w w  w  .  j a  va  2s  . co m-->
 <body> 
  <div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;"> 
   <div style="position: absolute; top: 20px; left: 20px; height: 10px; width: 10px;"> 
    <div style="position: fixed; height: 100px; width: 100px; background: green;"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials