- Make use of
display
andposition
properties
-
What is the
display
property?-
Allows you to adjust how the elements are placed on the web page
-
Some most commonly used values:
none
,inline
,block
,inline-block
,flex
(more on that later), (Bonus:grid
)Value block
- starts on a new line - takes up the entire width inline
- stays in the same line as the other elements - does not start on a new line - only takes up as much width as necessary - width
andheight
properties have no effectinline-block
- combination of both block
andinline
- stays in the same line as the other elements, but you can apply width
andheight
valuesnone
- element does not show up flex
- displayed as a block-level flex container (more later)
-
-
What is the
position
property?-
Allows you to adjust where the elements are placed on the web page
-
Use in conjuction with
left
/right
/top
/bottom
/z-index
to move your elements to where you want them at -
Some commonly used values:
static
,relative
,absolute
,fixed
,sticky
Value static - default value for most elements relative - relative to its normal position absolute - relative its nearest not static, parent element sticky - positioned based on scroll position - toggles between relative
andfixed
- will stick to a specified location when scroll location reaches a specified threshold -
static
andrelative
keep their natural space in the flow of the document -
absolute
andfixed
are removed from the flow
-