Yeah CSS positioning is weird. Here's roughly how it works:
By default, all elements have a static position, which means the normal flow of the page controls their positioning. It basically means that all elements are interdependent and will make room for one other.
With position: relative, the normal flow of the page still decides where the element is positioned, but gives you the option to nudge it with the top/right/bottom/left properties. So if you set for example, top:100px, it will move the element from its original position
Absolute positioning removes the element from the flow of the page and basically gives you full control on its position on the document. BUT an element that has absolute positioning will always refer to another element for its position. By default, its the document, so if you start using the top/right/bottom/left properties, it will position your element relatively to the document.
In order to have a child respond to the position of its parent, you need to set position absolute (relative works too) to the parent as well. If the direct parent doesnt have a position absolute (or relative), the element will go up the html chain and check its grand parent, great grand parent etc, until it finds an ancestor that has the position absolute value. then it will refer to it for its own positioning.
Position fixed also remove the element from the page and lets you position it with the top/right/bottom/left properties, but it will always do so relatively to the document. That's not very useful with CSS images, but is a great way to keep a navbar at the top of the document for example, even when scrolling occurs.
I like to use the code snippet above in CSS images, because it makes sure that an element will always be positioned relatively to its parent.
Thank you for the detailed explanation, I have a clearer idea of how this actually works,
In a sense, relative position will still be interdependent on the rest of the elements in the flow but allow me to move it around with the properties.
Absolute will always find a parent position to take reference from before applying the properties and fixed position does not care about anyone and will immediately apply the properties by taking reference to the document!
I shall go and experiment with this to firm up my foundation, and after I managed to draw something out, I shall show it to you! :D
Thank you, glad you liked it!
Yeah CSS positioning is weird. Here's roughly how it works:
By default, all elements have a static position, which means the normal flow of the page controls their positioning. It basically means that all elements are interdependent and will make room for one other.
With position: relative, the normal flow of the page still decides where the element is positioned, but gives you the option to nudge it with the top/right/bottom/left properties. So if you set for example, top:100px, it will move the element from its original position
Absolute positioning removes the element from the flow of the page and basically gives you full control on its position on the document. BUT an element that has absolute positioning will always refer to another element for its position. By default, its the document, so if you start using the top/right/bottom/left properties, it will position your element relatively to the document.
In order to have a child respond to the position of its parent, you need to set position absolute (relative works too) to the parent as well. If the direct parent doesnt have a position absolute (or relative), the element will go up the html chain and check its grand parent, great grand parent etc, until it finds an ancestor that has the position absolute value. then it will refer to it for its own positioning.
Position fixed also remove the element from the page and lets you position it with the top/right/bottom/left properties, but it will always do so relatively to the document. That's not very useful with CSS images, but is a great way to keep a navbar at the top of the document for example, even when scrolling occurs.
I like to use the code snippet above in CSS images, because it makes sure that an element will always be positioned relatively to its parent.
I hope this makes some sense? Let me know!
Thank you for the detailed explanation, I have a clearer idea of how this actually works,
In a sense, relative position will still be interdependent on the rest of the elements in the flow but allow me to move it around with the properties.
Absolute will always find a parent position to take reference from before applying the properties and fixed position does not care about anyone and will immediately apply the properties by taking reference to the document!
I shall go and experiment with this to firm up my foundation, and after I managed to draw something out, I shall show it to you! :D
That's it!
Have fun experimenting, I'm looking forward to seeing your first piece of css art!