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.
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.
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 html css css3
You are not signed in. Login or sign up in order to post.
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.
– Raizant