I have read about the position property, but still can not understand its purpose. The absolute and relative values did not enter my head. I also wanted to know when I should use this property.
How does the Position property work? [duplicate]
4
asked by anonymous 22.12.2016 / 21:54
1 answer
4
There are four values for the property Position: Static, Relative, Fixed e Absolute
Static
O position: static; is not based on the top, left, bottom ou right properties, it simply stays where you put it "static" and accompanies it in the normal flow of the page.
Relative
The relative value causes the element to be positioned relative to the value entered in top, left, bottom ou right .
Eg if you set up an element like this:
position: relative;
left: 10;
It will be in the normal position in the flow of the page added + 10px away from the left side.
Fixed
An element configured with fixed will be fixed on the screen, no matter how you scroll down the page. When you see a site that has a top menu that always stays on top, regardless of whether you scroll down the bar, it is probably marked as position: fixed; .
Absolute
The element with position: absolute; is positioned relative to the element "superior" to it (if it is inside another element), or relative to the body (if it is not inside another element). If you configure it like this:
position: absolute;
left: 10;
top: 20;
It will remain in position "10, 20", and other than fixed, when you scroll down the screen, it will move, always keeping the absolute position relative to the "upper" element.
If it is inside another div, the position "10, 20" I mentioned before would be referring to it.
Ex: if the parent div is in the "20, 30" position, the absolute div would be at "20, 50".
23.12.2016 / 00:31