CSS: Introduction to the position property

1. Position Property
CSS Rules of the Road
WEB CODING | CSS PROPERTIES

2. In CSS …
• Understand and the position property and how to use it
• Practice relative, fixed and absolute positioning
• Understand when to use non-static positioning
WEB CODING | CSS PROPERTIES
Learning Objective
2

3. In today’s Lesson:
• Introduce the position property
• Demonstrate each relative, fixed and absolute positioning
• Practice exercises and review solutions
• Check-in
• Resources to continue learning
WEB CODING | CSS PROPERTIES
Lesson
3

4. What is the position property?
In CSS …
• The Position Property controls the rules of layout
• All the layout rules for block and inline elements that we’ve
learned so far are part of static positioning (default)
• CSS Rule … selector { position: static; } is default
WEB CODING | CSS PROPERTIES
4

5. We’ve learned to change inline elements to block or inline-block using
the display property.
With the position property, we can change the rules of layout and have
more control over elements:
• relative | move elements relative to where they are
• fixed | fix elements position on the page (doesn’t scroll)
• absolute | set an absolute position (scrolls with the page)
WEB CODING | CSS PROPERTIES
Context
5

6. p {
margin-bottom: 10px;
}
Selector: “Select all paragraph tags on the page”
property: value; set the bottom margin to 10 pixels
We’ve already been using the position property
WEB CODING | CSS PROPERTIES
6

7. p {
position: static; /* default */
margin-bottom: 10px;
}
Assumed (default)
We’ve already been using the position property
WEB CODING | CSS PROPERTIES
7

8. Dive in …
WEB CODING | CSS PROPERTIES
8

9. 1. Set position property to:
relative, fixed, -or- absolute
2. Set a vertical and horizontal property:
vertical: top -or- bottom
horizontal: left -or- right
2 steps
WEB CODING | CSS PROPERTIES
9

10. w3schools: https://w3schools.com/cssref/pr_class_position.asp
Reference
WEB CODING | CSS PROPERTIES
10

11. p {
position: relative;
top: 0;
left: 0;
}
Set the positioning rules to relative
Set how much you want to move the element vertically and horizontally
Syntax
WEB CODING | CSS PROPERTIES
11

12. p {
position: fixed;
bottom: 50px;
right: 0;
}
Set the positioning rules to fixed
Set where you want to the element vertically and horizontally
Syntax (continued)
WEB CODING | CSS PROPERTIES
12

13. Move elements relative to where they naturally are, eg, relative
to their static position:
• relative | move elements relative to where they are
p {
position: relative;
top: 30px;
left: 25px;
}
position: relative;
WEB CODING | CSS PROPERTIES
13

14. Demo: Relative
WEB CODING | CSS PROPERTIES
14
Demo: bit.ly/ep-position-property

15. Fix elements relative to the viewport:
• fixed | move elements relative to the viewport
p {
position: fixed;
top: 30px;
left: 25px;
}
position: fixed;
WEB CODING | CSS PROPERTIES
15

16. Demo: Fixed
WEB CODING | CSS PROPERTIES
16
Demo: bit.ly/ep-position-property

17. Position elements relative to the first NON-STATIC ancestor:
• absolute | position elements relative to 1st non-static
ancestor
.ancestor {
position: relative; /* So we don’t move the ancestor */
top: 0;
left: 0;
}
p {
position: absolute;
top: 30px;
left: 25px;
}
position: absolute;
WEB CODING | CSS PROPERTIES
17

18. Demo: bit.ly/ep-position-property
Demo: Absolute
WEB CODING | CSS PROPERTIES
18

19. Solution
Solution: bit.ly/ep-position-property-solution
NOTE: FORK First!
WEB CODING | CSS PROPERTIES
19

20. How did it go?
WEB CODING | CSS PROPERTIES
20
Solution: bit.ly/ep-position-property-solution

21. WEB CODING | CSS PROPERTIES
Continue Practicing
w3schools: https://w3schools.com/cssref/pr_class_position.asp
21

22. WEB CODING | CSS PROPERTIES
Resources
22

23. Slides: bit.ly/ep-position-slides
Slides
WEB CODING | CSS PROPERTIES
23