Position div based upon another that has absolute position - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Position div based upon another that has absolute position

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">
#parent {<!--from ww  w  . ja  v  a2  s. c  om-->
   width:501px;
   height:501px;
   background-color:Chartreuse;
   border:3px solid yellow;
   position:relative;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
}

#parent .blocks {
   width:41%;
   height:51%;
   display:flex;
}

#parent .blocks div {
   width:100%;
   height:100%;
}

#div1 {
   background:green
}

#div2 {
   background:red
}
</style> 
 </head> 
 <body> 
  <div id="parent"> 
   <div class="blocks"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials