Absolute Position a Child Div inside Fluid Parent - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Absolute Position a Child Div inside Fluid Parent

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
html{position:relative;}

#main_container {max-width:1000px;}

#map_container {width:100%;height:100%; position:relative;padding:0; margin:0}

#map_image {width:100%; padding:0; margin:0}

#pin_it{<!--from   ww  w.ja v a  2s  .com-->
    position:absolute; top:30%; 
    left:20%; 
    transform:translate(-50%, -100%);
    -webkit-transform:translate(-50%, -100%);
    -ms-transform:translate(-50%, -100%);
    -moz-transform:translate(-50%, -100%); 
    max-width:30%;
    min-width:50px;
}

      </style> 
   </head> 
   <body> 
      <div id="main_container"> 
         <div id="map_container"> 
            <img id="map_image" src="http://java2s.com/resources/d.png" alt="alt message"> 
            <img id="pin_it" src="http://java2s.com/resources/i.png" alt="alt message"> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials