Someone explain the difference between the position attributes in css for me, please.

Question

Css confusion

Answer 1

The 'position' css property handle the positionement mode (not the position as coordinates).

The normal (default) mode is to let the browser auto position each element regarding their place in the stream content...
Using a positionned mode, allow us to keep more control on place of one element, by retrieving it from the normal content stream and provide values for moving it independently (in the display x-y plan as well as in their order of stack -- by default first declared elements are behind last declared hidding eventually first)

There's 3 main values for the 'position' property: 'fixed', 'absolute' and 'relative'... this is a bit confusing, because all are relative, the difference being in to what in each cases:

+ 'relative' means that position of element will be relative to itself normal position if in the content stream, with reserving it required space normally in the display ( but allowing moving it without interfering with other element in the content stream -- ie 'left:20px' will shift the element 20 pixel to the RIGHT as value is positive, from its initial position of its LEFT side: in this case, strictly the same than 'right:-20px;')

+ 'absolute' means that position of element will be relative to its first positionned parent (if not, the left-top corner of display viewport). 'left'/'right' and 'top'/'bottom' properties works slightly differently in this case: 'left' means relative to first positionned parent LEFT side, 'right' means relative to RIGHT side, and same with 'top' and 'bottom'. Element is totally retrieving from the normal content stream: no space is reserved and others elements are displaying as positionned element doesn't exist.

+ 'fixed' works in a comparable way of 'absolute', but will fix the element when scroll occurs...

Answer 2

https://www.w3schools.com/css/css_positioning.asp
hope that was helpfull :-)

Answer 3

Read all that man, but just don't get it.

Answer 4

thanks a loads, best explanation ever received to this concept. a 👍 to u bro