Display and Positioning
In this course, you will learn CSS rules for displaying and positioning elements on your web page.
StartKey Concepts
Review core concepts you need to learn to master this subject
CSS z-index
property
Fixed CSS Positioning
CSS display
property
CSS position: absolute
CSS position: relative
CSS float
property
The CSS clear
property
CSS z-index
property
CSS z-index
property
//`element1` will overlap `element2`
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: -1;
}
The CSS z-index
property specifies how far back or how far forward an element will appear on a web page when it overlaps other elements.
The z-index
property uses integer values, which can be positive or negative values. The element with the highest z-index
value will be at the foreground, while the element with the lowest z-index
value will be at the back.
- 1A browser will render the elements of an HTML document that has no CSS from left to right, top to bottom, in the same order as they exist in the document. This is called the flow of elements in H…
- 3One way to modify the default position of an element is by setting its position property to relative. This value allows you to position an element relative to its default static position on the …
- 4Another way of modifying the position of an element is by setting its position to absolute. When an element’s position is set to absolute all other elements on the page will ignore the element a…
- 5When an element’s position is set to absolute, as in the last exercise, the element will scroll with the rest of the document when a user scrolls. We can fix an element to a specific position on…
- 7Every HTML element has a default display value that dictates if it can share horizontal space with other elements. Some elements fill the entire browser from left to right regardless of the size of…
- 8Some elements are not displayed in the same line as the content around them. These are called block-level elements. These elements fill the entire width of the page by default, but their width pr…
- 9The third value for the display property is inline-block. Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can s…
- 12Great job! In this lesson, you learned how to control the positioning of elements on a web page. Let’s review what you’ve learned so far: 1. The position property allows you to specify the positi…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory