Display and Positioning

In this course, you will learn CSS rules for displaying and positioning elements on your web page.

Start

Key Concepts

Review core concepts you need to learn to master this subject

CSS display property

CSS z-index property

Fixed CSS Positioning

CSS position: absolute

CSS position: relative

CSS float property

The CSS clear property

CSS `display` property

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

The CSS display property determines the type of render block for an element. The most common values for this property are block, inline, and inline-block.

Block-level elements take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted.

Inline elements take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted.

Inline-block elements can appear next to each other, and can have their width and height manually adjusted.

CSS `z-index` property

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

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.

Fixed CSS Positioning

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

Positioning in CSS provides designers and developers options for positioning HTML elements on a web page. The CSS position can be set to static, relative, absolute or fixed. When the CSS position has a value of fixed, it is set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. The navigation bar is a great example of an element that is often set to position:fixed;, enabling the user to scroll through the web page and still access the navigation bar.

CSS `position: absolute`

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

The value absolute for the CSS property position enables an element to ignore sibling elements and instead be positioned relative to its closest parent element that is positioned with relative or absolute. The absolute value removes an element entirely from the document flow. By using the positioning attributes top, left, bottom and right, an element can be positioned anywhere as expected.

CSS `position: relative`

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

The value relative of the CSS position property enables an element to be positioned relative to where it would have originally been on a web page. The offset properties can be used to determine the actual position of the element relative to its original position. Without the offset properties, this declaration will have no effect on its positioning, it will act as the default value static of the position property.

CSS `float` property

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

The CSS float property determines how far left or how far right an element should float within its parent element. The value left floats an element to the left side of its container and the value right floats an element to the right side of its container. For the property float, the width of the container must be specified or the element will assume the full width of its containing element.

The CSS `clear` property

.container1 {
  display: block;
}

.container2 {
  display: inline;
}

.container3 {
  display: inline-block;
}

The CSS clear property specifies how an element should behave when it bumps into another element within the same containing element.The clear is usually used in combination with elements having the CSS float property. This determines on which sides floating elements are allowed to float.

CSS Display and Positioning

Lesson 1 of 1

1
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…
2
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…
3
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 …
4
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…
5
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…
6
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 …
7
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…
8
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…
9
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…
10
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,…
11
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…
12
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…

What you'll create

Portfolio projects that showcase your new skills

Broadway
It's time to build fluency in CSS Display and Positioning. In this next Pro Project, we're going to practice element positioning in CSS so you can hone your skills and feel confident taking them to the real world. Why? Applying the display and position properties on a certain element is something you'll be doing plenty of with CSS, so exploring and practicing it now will help you a lot. What's next? Concrete jungle, design firm, more CSS. You got this!

How you'll master it

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

CSS Display and Positioning
Complete the statement: An inline element . . .

Display and Positioning

Start

Display and Positioning

Key Concepts

CSS `display` property

CSS `z-index` property

Fixed CSS Positioning

CSS `position: absolute`

CSS `position: relative`

CSS `float` property

The CSS `clear` property

What you'll create

Broadway

How you'll master it

CSS Display and Positioning

Display and Positioning

Subjects

Languages

CSS display property

CSS z-index property

Fixed CSS Positioning

CSS position: absolute

CSS position: relative

CSS float property

The CSS clear property

Broadway

CSS Display and Positioning

CSS `display` property

CSS `z-index` property

CSS `position: absolute`

CSS `position: relative`

CSS `float` property

The CSS `clear` property