Learn

Another powerful feature of CSS Grid Layout is the ability to easily overlap elements.

When overlapping elements, it is generally easiest to use the grid-area property with grid row names. Remember that grid-area will set the starting and ending positions for both the rows and columns of an item.

<div class="container"> <div class="info">Info!</div> <img src="#" /> <div class="services">Services!</div> </div>
.container { display: grid; grid-template: repeat(8, 200px) / repeat(6, 100px); } .info { grid-area: 1 / 1 / 9 / 4; } .services { grid-area: 1 / 4 / 9 / 7; } img { grid-area: 2 / 3 / 5 / 5; z-index: 5; }

In the example above, there is a grid container with eight rows and six columns. There are three grid items within the container — a <div> with the class info, a <div> with the class services, and an image.

The info section covers all eight rows and the first three columns. The services section covers all eight rows and the last three columns.

The image spans the 2nd, 3rd, and 4th rows and the 3rd and 4th columns.

The z-index property tells the browser to render the image element on top of the services and info sections so that it is visible.

Instructions

1.

In style.css, inside the .left ruleset, add the grid-area property and set its value to 4 / 1 / 9 / 5. This sets the Left element to take up rows 4 through 8, and columns 1 through 4.

2.

In style.css, inside the .right ruleset, add the grid-area property and set its value to 4 / 5 / 9 / 7. This sets the Right element to take up rows 4 through 8, and columns 5 and 6.

3.

In style.css, inside the .overlap ruleset, add the grid-area property.

Set its value so that the overlap element spans the 6th and 7th rows and the 4th and 5th columns.

4.

Notice that the overlap element is covered by the right element.

Set the z-index of the overlap element to 5.

5.

In style.css, inside the footer ruleset, add the grid-area property and set its value to 9 / 1 / 13 / 7.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?