Web Design

CSS Positions

textgram_1491883428There are four positions of elements in CSS.
1) Static
2) Relative
3) Absolute
4) Fixed
So, the default position of each element static.

html file
static_code
Css File
static_css

web page(result of above Code)
static

I have these three elements (div). Their positions on page are static. with static positions the elements on screen look like above..

Every element take their position from top-left corner of the page or element.

top-left

If I change the position of the second div’s position to RELATIVE:

1) It does not change anything in the page..

Css File
relative_pos

web page(result of above Code)
static

until you set the top, left, bottom, right properties of that elements.

if i set the second div’s top:10px and with the position relative

relative_style

it does not effect the first and third element. just the second element get down to 10px..it come over the third element but it does not change the position of the third element.

relative

In that way the Relative positioned element does not disturb the other elements. It slide over or down other elements but never disturbs the position of other elements.
If I change of the second element to ABSOLUTE
1) Absolute positioned elements disturb the elements below it.

absolute_styleabsolute
2) All elements below the absolute positioned elements move upwards to take the position of the upper elements.
3) All element take the top-left corner as a origin. So the absolute positioned element take the position like above.

Absolute position works relative to its parent.

in the above example there is no parent of second div. if we set a parent of  second divabsolute_codeabsolute_cssabsolute12

Now see what happen.

1) we set the parent to the position relative

2)set the second div’s top to 10px

3) now  its top-left origin is changed from first div to parent div. and it takes its position relative to its parent not first div.

4) it comes down 10px from parent div.

Absolute positioned element actually floats on the screen. it does not take any extra space but it positioned top of the lower divs. we can move the absolute positioned elements anywhere on the screen by changing its top, left, right, bottom properties.

If i change the position of div to Fixed

  1. its pretty much behaves like absolute but the major difference in between the two is the div with fixed property relative to the body instead of its parent
  2. whenever you fix the position of element there is no effect of scrolling on it, because its position set to fixed.

 

if you want to display some advertisement or menu on the web page with fixed position then it always remain displayed on the screen. no matter how much scrolling you do..

for better understanding watch this video on youtube

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s