How does the Position property work?

Asked

Viewed 280 times

4

I’ve read about the property position, but still can’t understand its purpose. Values absolute and relative didn’t get into my head. I also wondered when I should use this property.

  • 2

    Read this link if you can: http://answall.com/questions/38215/quando-usar-position-absolute-ou-relative-em-css, it might help. In fact, it has the answers to your question.

1 answer

4

There are four values for the property Position: Static, Relative, Fixed e Absolute

Static

position: Static; not based on properties top, left, bottom ou right, it simply stays in the place where you put it "static" and accompanies in the normal flow of the page.

Relative

The relative value causes the element to be positioned relatively according to the value reported in top, left, bottom ou right.

E.g.: if you set up an element like this:

position: relative;
left: 10;

It will be in the normal position in the page flow added +10px distance from the left side.

Fixed

An element configured with fixed, will stay fixed on the screen, no matter how far you scroll down the page. When you see a site that has a top menu that always sits at the top, regardless of whether you scroll down, it’s probably marked as position: fixed;.

Absolute

The element with position: Absolute; is positioned relative to the element "superior" to it (if inside another element), or relative to the body (if not inside another element). If you set it up like this:

position: absolute;
left: 10;
top: 20;

It will remain at position "10, 20", and unlike Fixed, when you scroll down the screen, it will move, always maintaining the absolute position in relation to the "higher" element".

If he is inside another div, the position "10, 20" I quoted before, would refer to it.

Ex: if the parent div is in the "20, 30" position, the absolute div would be in the "20, 50".

Browser other questions tagged

You are not signed in. Login or sign up in order to post.