InternshipDisplay and position
Block, inline, relative, absolute, fixed and sticky explained.
Display
| Value | Behaviour |
|---|---|
block | Starts on a new line and fills the width, like <div> and <p> |
inline | Sits in the text flow and ignores width and height, like <span> |
inline-block | Sits in the flow but accepts width and height |
none | Removed from the page completely |
flex / grid | Lays out the children. See the next two lessons |
Position
| Value | Behaviour |
|---|---|
static | The default: normal page flow |
relative | Stays in the flow, can be nudged, and anchors absolute children |
absolute | Leaves the flow and is placed against the nearest positioned ancestor |
fixed | Placed against the screen, so it stays put as you scroll |
sticky | Scrolls normally, then sticks once it reaches an edge |
Edit the CSS
Preview