► The CSS position property allows us to define where element boxes are going to reside on the webpage. This could be relative to their usual starting position, relative to parent element or ancestor elements, or relative to the viewport.
The position property can have one of five main properties:
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
- position: sticky;
We’ll learn all of these in this video.
In addition, we will look at offset properties, controlling content that overflows its container, element visibility, and z-index which allows us to control how elements stack.
► Timestamps:
0:00 Start
0:53 The position property and the containing block
2:05 Static positioning
2:27 Relative positioning & offset properties
4:45 z-index
6:43 Absolute positioning
12:03 Content Overflow
14:45 Fixed positioning
15:54 Creating a navbar with fixed positioning
18:20 Sticky positioning
19:22 Element visibility
21:06 End
► Get the code:
1st Pen start - https://codepen.io/tryminim/pen/powYLmr
1st Pen end - https://codepen.io/tryminim/pen/PojLRrZ
2nd Pen start - https://codepen.io/tryminim/pen/KKqERPv
2nd Pen end - https://codepen.io/tryminim/pen/qBjvYWv
► Useful links:
The position property - https://developer.mozilla.org/en-US/docs/Web/CSS/position
CSS Positioning overview: https://datacadamia.com/web/css/positioning/offset
The containing block - https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
Document flow - http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html
Z-index - https://css-tricks.com/almanac/properties/z/z-index/
Element visibility - https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
► This video is part of the CSS for Absolute Beginners playlist: https://www.youtube.com/playlist?list=PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR
► https://tryminim.com
► Social Media:
https://www.twitter.com/tryminim
https://www.instagram.com/tryminim
► Code & Projects:
https://github.com/tryminim
https://codepen.io/tryminim
0 Comments