CSS Positioning

I'm going to talk about 4 types of CSS positioning. 1.Static Positioning- this applied by default…if an element is set to static Positioning it doesn't do anything no matter what you add. I don’t usually even bother writing position: static—it’s already on by default. But if I need to cancel out some weird inherited style or just reset things to normal, I’ll through it in. Like this: position: static; top: 40px; /* Does nothing, seriously. / left: 40px; / Yeah, still not moving. / 2.Relative Positioning. Relative positioning lets you nudge an element from its static spot without breaking the flow. The magic’s in the offset crew: top, right, bottom, left. These let you slide your element around. For example: position: relative; top: 40px; / Drops it down a bit. / left: 40px; / moves it to the right. */ 3.Absolute Positioning- With absolute you can make something fly around the page. Yes it can fly

Feb 27, 2025 - 07:21

I'm going to talk about 4 types of CSS positioning.

1.Static Positioning- this applied by default…if an element is set to static Positioning it doesn't do anything no matter what you add. I don’t usually even bother writing position: static—it’s already on by default. But if I need to cancel out some weird inherited style or just reset things to normal, I’ll through it in. Like this:

position: static;
top: 40px; /* Does nothing, seriously. /
left: 40px; / Yeah, still not moving. */

2.Relative Positioning.
Relative positioning lets you nudge an element from its static spot without breaking the flow.
The magic’s in the offset crew: top, right, bottom, left. These let you slide your element around. For example:

position: relative;
top: 40px; /* Drops it down a bit. /
left: 40px; / moves it to the right. */

3.Absolute Positioning- With absolute you can make something fly around the page. Yes it can fly