Getting your head around positioning elements in CSS can be very confusing.
When I first started doing front-end web development, I would often end up
spending hours trying to figure out why one element or another was refusing
render where I thought it should. Nine times out of ten, the problem usually
had something to do with the surrounding elements and what the value of their
position attribute happened to be.
In order to help new developers understand how relative positioning works in CSS, I put together a quick visual demonstration.
The box labeled “5” is absolutely positioned zero pixels from the right side of its parent container (by default, container 4).
When you click on one of the checkboxes, the corresponding container
position property gets set to
static (the default value). If you
click on the checkbox labeled “Disable Level 4”, you’ll
notice that the “5” box jumps from the right of box 4 to the right
of box 3. This is because, by setting 4’s position to
relative, you are telling box 5 that 4 is no longer the parent
container. Confused? I was too. When we look at the nested nature of HTML,
we would assume that the “parent container” of an element is the
nearest element that contains another element. In our case, the parent of 5
would be 4. However, the browser sees things a little different. It defines a
parent element as the nearest element that contains another element that also
position element set to
relative. By changing the
position attribute of a parent element, you’re forcing the browser
to look for the next nearest element with a relative position. Notice how,
if you recheck the checkbox, the 5 box jumps back into place.