Key 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

//`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.

CSS Display and Positioning
Lesson 1 of 1
  1. 1
    Flow of HTML
    A 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…
    Start
  2. 2
    Position
    Take a look at the block-level elements in the image below: Block-level elements like these boxes create a block the full width of their parent elements, and they prevent other elements fro…
    Start
  3. 3
    Position: Relative
    One 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 …
    Start
  4. 4
    Position: Absolute
    Another 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…
    Start
  5. 5
    Position: Fixed
    When 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…
    Start
  6. 6
    Z-Index
    When boxes on a web page have a combination of different positions, the boxes (and therefore, their content) can overlap with each other, making the content difficult to read or consume. .box-top …
    Start
  7. 7
    Inline Display
    Every 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…
    Start
  8. 8
    Block Display
    Some 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…
    Start
  9. 9
    Inline-Block Display
    The 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…
    Start
  10. 10
    Float
    So far, you’ve learned how to specify the exact position of an element using offset properties. If you’re simply interested in moving an element as far left or as far right as possible on the page,…
    Start
  11. 11
    Clear
    The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, element…
    Start
  12. 12
    Review: Layout
    Great 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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo