Position div over two others either relatively or absolute - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Relative Position

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

Description

Position div over two others either relatively or absolute

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">
div {<!--from ww  w . j  av a2 s . com-->
   width:100%;
}

#outer1, #outer2 {
   position:relative;
}

#outer1 .top {
   height:201px;
   background-color:Chartreuse;
}

#outer1 .base {
   height:201px;
   background-color:yellow;
}

#outer2 .top {
   height:201px;
   background-color:blue;
}

#outer2 .base {
   height:201px;
   background-color:pink;
}

.content {
   width:100px;
   position:absolute;
   margin-top:-251px;
   height:100px;
   background-color:OrangeRed;
   border:2px solid grey;
}
</style> 
 </head> 
 <body> 
  <div id="outer1"> 
   <div class="bg"> 
    <div class="top"></div> 
    <div class="base"></div> 
   </div> 
   <div class="content"></div> 
  </div> 
  <div id="outer2"> 
   <div id="bg"> 
    <div class="top"></div> 
    <div class="base"></div> 
   </div> 
   <div class="content"></div> 
  </div>  
 </body>
</html>

Related Tutorials