CSS positioning
position property
- static
- relative
- absolute
- fixed
- sticky
position: static
- default position
position: relative
position: relative;
top: 20px;
left: 20px;- relative to the original position
- the original space is retained
position: absolute
- relative to the element with other than static position above
- taken out from the document flow
position: fixed
- relative to the viewport
- not affected by scrolling
- used for floating menu
position: sticky
- like relative until window reaches certain position
- then like fixed
- http://beta.antonio-pizza.cz/jidelni-listek
z-index
- defines priority
- works only on positioned elements
- stacking context
.above {
z-index: 50;
}
.below {
z-index: 2;
}Playground
- https://github.com/MartinNuc/css-playground​
- insert two images and position them over each other
- make sure the text after images is not covered
lorem ipsum