Style CSS Position Absolute and Relative

Style CSS Position Absolute and Relative

With the use of Style Position on a html element, you can position that element anywhere on html.

There are two main type of mode that can used with style position that is absolute and relative positioning.

Relative position on a element, simply means that the element can be resize in portion to the screen size changes.  When specifying the following attributes for example: style position:relative top:5%, down:5%, right:-5%, left:5%

  • top:5% refer to move the element from the top 5%,
  • from the bottom move the element 5% down,
  • right:5% mean move this element to the left 5%,
  • with left:5% move element to the left 5%.

Absolute position on a element simply mean the element is fixed when the screen is resize. Using the following attributes like top:5, down:5%, right:5%, left:-5%. By default this would mean that the element would move in relation to full screen size,

  • from the top move the element 5%,
  • from the bottom move the element 5%,
  • from the right move the element 5% and so forth.

You can also use relative and absolute position together.

Say for example if want to move a element within a certain div container,   on the div container you can use relative positioning and on the element you can use absolute position. This allow you to move a element with div container.

A typical example would be, say you need to move a image file from within a div by 5%

<div style=position:relative>

<img style=position:absolute top:5%> </img>

</div>

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *