The figure above is an example of a relative positioned image.
The figure above and to the right in the purple box is an example of a fixed positioned image.
The figure below and that never moves from the lower-right hand corner an example of a relative positioned image.
The differences between the positons.
Relative
Relative positons refer to a position that stays in a normal postion on the page.
Fixed
Fixed refers to an item in a position in which is specifcally stuck on the page and
can't be moved from it's position, even if you scroll on the page.
Absolute
This is the kind of things that is positioned closer to the orignial item that is relative, but
usually on an adjacent side.
Z-Index
This link can tell you more of what
a Z-Index is, but in lamens terms, it is an item that specifically tells what order items must be stacked into. It can
be used for prioritizing specific items on your page to make sure it looks neatly organized and clean, and to show
what takes priority.
Pitfalls
The biggest issues that I noticed that browsers are commonly afflicted with involves
display issues with the CSS not properly displaying the floats and positioning for the items presented.
Different browsers like Firefox and Microsoft Edge tend to suffer the most, with Google Chrome being
one of the most common browsers being used, therefore it has the most optimization to add to its ability to prevent
any issues from arising.
