Relative vs Static


#1


I've been struggling a little bit with the exercises about the position propperty, and via some external help I think im finally starting to understand it.

Absolute is to be relative to the first non static parent, fixed is relative to viewing window, static is just default and relative is relative to the position the elemnt would've been at if you just let it be.

This gave me the question, why do we even have the static propperty, & furthermore why is it the default one. To me it kinda seems like static is basicly the same as relative, but with less propperties you can edit, and also something one should always change if he ever wants to use the absolute position.

I simply dont see the use of the static position value. Could someone confirm my feeling about this or give me an example or explanation why static is usefull, even usefull enough to be the default when we have a more powerfull value.

Thanks for reading & helping!

~Florian

Edit:
In my extra research I also found out someone was using negative values for an image with the absolute value to get it on the border of a box it was in
He used a bottem: -75px, wouldnt a top: 75px have the same effect, & if not why?


#2

The basic difference between static and relative is that static has no position properties, and therefore most likely no margin properties,either. Static is strictly normal flow.

Using bottom is like having a bottom margin, but it should not push the element up the page. It should be pushing the bottom further down. Yes, a top property (or margin) would be the way to set it relative to the top edge.


#3

I still don't understand why static is a thing, nor what you mean by stating a static element most likely not having any margin properties.

Before this lesson we have only used static position (default) and we were able to give things margins, I simply don't follow you.


#4

The margins comment was meant to entice you into searching for specifications and experimenting. Good that you challenged it.

https://www.w3.org/TR/CSS2/visuren.html#propdef-position


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.