This is a box with static positioning. It's tall enough to fit its contents.

This is another box with static positioning. It's tall enough to fit its contents.

This is a third and final box with static positioning. It's tall enough to fit its contents.

This box has relative positioning. It can be moved with top, bottom, right, and left declarations without disturbing the other elements. This is the basis of coding a pop up window.

Pro tip: When using these properties, make the value negative. That way, it behaves like coordinate points a cartesian plane.

P.S: This box isn't centered. It's just moved relative to its original position.

This box is has a property of absolute. It has the same top, right, bottom, and left values as it's parent unless coded otherwise. If this text is visible despite the tiny size of the container, you need to add `overflow: hidden` declaration.

Jk, this is the actual final box with static positioning.


It is to prove that the relative box, while it breaks out of the flow, is still acknowledged. Look at the chunk of space between this and the 3rd box! This isn't helpful when making a popup. We don't want this chunk of space, the remnants of the popup box, to influence the look of our page.

This is where absolute positioning truly shines.

This is a block with the absolute property. It behaves as if it doesn't exist; the other elements don't acknowledge it by leaving space where it once stood.

This absolute child is similar to the one in the relative box.

This is a box with static positioning. Unlike the previous box, it doesn't acnowledge the pop up box that's coded right before it.

This is another practice for a popup with an absolute property. The difference between this and the relative popup is that this won't leave a space between elements that come before or after it. The parent box of this pop up the the browser's window. You can check by changing it's top left values to 0.

However, this only happens if there's no other non-static (absolute, sticky, relative, and fixed) elements. To make an element have it's parent box the web browser, you need the fixed positioning declaration.

Pro tip: Do not set a width. Use top, bottom, left and right to center and size this popup.

This is the child element of this popup. It also has an absolute property. Instead, it's parent element is this final popup.

2nd child element of this popup. It appears behind the first child because it was given a higher z-index value.

P.S: This depth only involves the siblings because they are confined to the parent element. If they weren't, the other non-static boxes, if given a higher depth value, could be in front of these children boxes. Capiche?

This is a box with static positioning. Unlike the previous box, it doesn't acnowledge the pop up box that's coded right before it.

This is the actual popup window. It uses three levels of div: the popup, blanket, and content. There's also a button element.

One key difference between this pop up and the previous (absolute and relative) ones, apart from the blanket, is that this one scrolls up and down with the user. The damn thing is fixed, or stuck to the screen. Super annoying. It's almost like the next positioning, sticky, except this doesn't alternate between relative and fixed.

P.S Centering this box can be tricky.

P.S.S Styling the close button is the same as the other popups. Maybe with a declaration `cursor: pointer` at the end.

Now there are two!

A box is stuck at the bottom of the screen!