Tuesday 8 January 2013

HTML absolute and relative positioning

Hi all,
Today i want to share some tips when developing css for web page "All ways enclose absolute positioned elements in relative or absolute one" other wise absolute positioned elements will align according to screen window, if you want to position your element according to screen window ten do not wrap in any relative or absolute one.

Example 1:-
Parent div
child div positioned to parent window

<html>
 <body>
   <div class="parent" style="border: 1px solid; padding: 5px; position: relative;height:40px;">
      Parent div
      <div class="child1" style="left: 10; padding: 5px; position: absolute; top: 20px;border:1px solid;">
      child div
      </div>
   </div>
 </body>
</html>


Example 2:-
Parent div
child div positioned to screen window
<html>

 <body>
   <div class="parent" style="border: 1px solid; padding: 5px;height:40px;">
      Parent div
      <div class="child1" style="left: 10; padding: 5px; position: absolute; top: 20px;border:1px solid;">
      child div
      </div>
   </div>
 </body>
</html>

No comments:

Post a Comment