CSS positioning has been around for quite some time. Even with the advent of all of the new css layout methods, CSS Positioning is still in heavy use today, and a necessity to learn.
Watch the Video Tutorial on YouTube for a visual explanation!
Regardless of which position type you choose, you'll always be moving an element in a specific direction from where it normally would flow. We call this altering the 'document flow'. There are 4 keywords you'll use to move. You can use positive or negative numbers. The value is always an offset from the keyword you choose, with positive number pushing 'inwards' and negative values pushing 'outwards':
- Top, Right, Bottom, Left
(image from video tutorial)
There are 4 main types of CSS positioning. We'll take a look at each starting with Relative Position
Relative Position
Two important things with relative positioning:
- Relative positioning is positioned according to itself
- Relative positioned elements are not removed from the document flow
Absolute Position
Two important things with absolute positioning:
- Absolute positioning is positioned according to the Parent Element (if the parent has a position)
- Absolute positioned elements are removed from the document flow
Fixed Position
Two important things with fixed positioning:
- Fixed positioning is positioned according to the viewport (browser window)
- Fixed positioned elements are removed from the document flow
Sticky Position
One important things with sticky positioning:
- Sticky positioning behave like relative, until they get 'stuck', then they behave like fixed (but on the parent, not the viewport)
Z-Index
Whenever you start moving things around, inevitably you'll have boxes that 'sit' on top of one another. You'll need to control the z plane stacking order. You do this via z-index property. It's pretty simple, the higher values sit on top of lower values:
(image from video tutorial)
Top comments (2)
So clear, thank u guy!
i was stuck for hours thanks for the simple and clean explanation