Align child div above parent to the right, don't overlap with each other - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Align child div above parent to the right, don't overlap with each other

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.container {<!--  ww w .  jav  a  2  s. c o m-->
   margin-top: 250px;
   position: relative;
   border:1px solid green;
}
.child {
   position: absolute;
   top: -200px;
   right: 0px;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="parent">
             This is a test. This is a test. 
             This is a test. This is a test. 
             This is a test. This is a test. 
             This is a test. This is a test. 
             This is a test. This is a test. 
             This is a test. 
         </div> 
         <div class="parent"> 
            <div class="child"> 
               <img src="http://java2s.com/resources/f.png" width="200" height="200" alt="alt message"> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials