2. Positioning
The CSS position property lets you control how
and where a web browser displays particular
elements.
Four types:
● Absolute
● Relative
● Fixed
● Static
about.me/babon
3. Positioning: Absolute
Absolute positioning lets you determine an
element's location by specifying one of the
following positions:
● left, right, top or bottom
... using one of the following measurements:
● pixels, ems or percentages
about.me/babon
5. Positioning: Absolute
Notes:
● The float property does not play well with the
following positions:
○ absolute
○ fixed
So, avoid using floats and absolute or fixed
position on the same elements.
about.me/babon
6. Positioning: Relative
A relatively positioned element is placed
relative to its current position in the HTML flow.
The main benefit of relative positioning isn't to
move an element, but to set a new point of
reference for absolutely positioned elements
that are nested inside it.
about.me/babon
8. Positioning: Fixed
A fixed element is locked into place on the
screen.
Similar to the fixed value for the background-
attachment property.
about.me/babon
9. Positioning: Fixed
Exercise: Positioning a banner in a fixed
position
● Create a new page called fixed.
Assignment: Position the banner in a fixed
position at the top center of page so that it sits
on top of the wrapper.
about.me/babon
11. Positioning: Static
Static positioning simply means that the content
follows the normal top-down flow of HTML.
Static is the normal positioning method.
Probably never use this attribute.
about.me/babon
12. Top | Bottom | Left | Right
Typically use Top or Left with absolute or fixed
positioning. Can also use Bottom or Right.
Can also use negative values to position
elements "away from the middle."
Experiment with absolute.html and fixed.html.
about.me/babon
13. Z-index
z-index is used to position an element in the
third dimension -- out and away from the page.
The higher the number, the further away from
the page.
about.me/babon
14. Z-index
z-index will only work on an element whose
position property has been explicitly set to
absolute, fixed or relative.
● Create a new page called z-index.html.
about.me/babon
