FAQ: Advanced CSS Grid - Overlapping Elements

This community-built FAQ covers the “Overlapping Elements” exercise from the lesson “Advanced CSS Grid”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn CSS

FAQs on the exercise Overlapping Elements

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

When you add the overlap element in point 4, why is it covered by the right element but not the left?

5 Likes

Why is the overlap element not covered by the left element?

1 Like

Even after using the z-index on my code, the ‘overlap’ element is still covered by the ‘right’ element

It because file is executed in a sequence.Check Index.html file.Plus if you change the position of right and overlap class and run it you will notice overlap block is no more covered by right block.

12 Likes

Overlapping Elements

“Another powerful feature of CSS Grid Layout is the ability to easily overlap elements.
When overlapping elements, it is generally easiest to use grid line names and the grid-area property.” …what???

Can you please EXPLAIN why you’d want to overlap elements or give (show) just one example?? Or better yet, what overlapping elements even means (besides the obvious of elements overlapping one another)??
This lesson really becomes frustrating and simply falls apart in the teaching department …somebody just gave up trying to explain basic functionality and began copying information directly out of a very tedious and very dulltextbook.

3 Likes

What happens if a grid-area is not set for an item existing in the html code? thanks

Hi! Why do we have to set the z-index to 5 as opposed to a lower number, like 1? Isn’t the default z-index of the other elements 0? Thanks in advance.

4 Likes

I’d also like to know this. I tried it with the value of 1, 2, 3…all the way up to 10 i think and no values changed the outcome. I’m guessing it would if there were more elements and they were all overlapping each other. But i can’t work out why the numbers make no difference.

1 Like

As per my very rudimentary understanding, using a z-index of 1 would work as well. I suspect they picked the value of 5 arbitrarily. I think picking a value of 5 just gives a bit of leeway in that if the coder decides to play around with the depth of other elements at a later time, then he/she could just assign the element(s) a value in the range of 1-4 (or 5+ if the other element has to be positioned on top) without having to touch the existing code. If the “overlap” element of the exercise had been given a value of 1, and then later someone wanted to change the positioning of some other element, then the z-index of the “overlap” element may also have to be edited. Just guessing. I could be wrong.

In this particular exercise, only the “overlap” element has been given an explicit z-index value. Unless you pick a negative value, giving the “overlap” element a z-index of 1 or 5 or 10 will not make a difference. If you gave some other elements a z-index and then played around with the numbers, then you will see the numbers making a difference in regards of which element comes up on top. Here are a couple of useful links:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
(You may want to have a look at the CSS Demo as well as the example at the bottom of the page)

https://www.w3schools.com/cssref/pr_pos_z-index.asp
(Click ‘Play it’ for the number property in the property values section to play around with an example)

8 Likes

How do we have other elements and content wrap around the overlapping element? Looking at the example, the “overlap” element is on top of left and right. If we have content in the “left” and “right” elements, how do we make the content to wrap around and not be drawn on top by the overlapping element without off-setting the content away from it?

Hopefully, one of the mods or other people well versed with CSS would be able to answer this.
I gather the issue you are trying to solve has to do with:
https://stackoverflow.com/questions/48031648/text-not-wrapping-in-css-grid

https://stackoverflow.com/questions/48721924/floating-elements-in-css-grid

Hi. Remember in some math class you took about graphs or geometry? the x, y, and z co-ordinates? the same logic applies to CSS z-index with the base being the body of the document at zero relatively. Using CSS you can put any element(text,image,sound/music file/ video file) on the z axis relative to the body is my understanding. Think of it as a 3 dimensional grid layout like you would see in any 3-D graphics creation program such as Blender, Maya, Illustrator to name a few except since we are using HTML and CSS the whole of it is displayed in two dimensions like on television. Hope this helps. Have a good day.

1 Like

One solution to having text wrap around say an image is to set up the grid with more columns and rows:
t = text and I = images s = background
tttttttttttt =12 columns of text
ttttiiiissss = 4 clolumns of text, 4 columns of image, 4 columns of background
ttttiiiissss = 4 clolumns of text, 4 columns of image, 4 columns of background
tttttttttttt = 12 columns of text`tttttttttttt =12 columns of text

If you look at the stuff i put up above and think about it in terms of CSS lay-out. I think and hope you get how you could wrap text around an image.

A practical use of overlapping elements would be when you want to have a semi-transparent picture or text above a couple of other elements whether they are some solid colors or images.
HTML and CSS are both processed on an old computing principle. LIFO(Last in first out). the last code line from top to bottom when reading the code will be the first out. The way we as humans read it and the order the cpu processes it is the same. If you have the .right first then the .overlap next then the .left last in order from top to bottom as you read it the the overlap will only overlap the .right unless you put the z-index greater than zero to the .overlap element. This the shortest best way I could think of explaining this at 1 a.m. after a days work and then going to school on-line here to learn HTML and CSS. Hope it helps someone along. Have a good night.

1 Like

In this exercise, where the height of .grid container is not set up and the rows template is expressed in fractions only, how does the browser calculate height of each row? Does it assume that the grid container is a square (height=width)?

I don’t think it assumes the container is a square. If height is not specified, then I think it defaults to height: auto. Hence, the height of the rows would be determined by the content. Whichever row’s content would result in the largest height, that height would be automatically used for all the rows. I am not entirely sure though.

1 Like

I think you can use float to wrap around stuff, i’m not sure if it is still in use though.

Hello There!

I am having a little trouble understanding this syntax:

.info {
grid-area: 1 / 1 / 9 / 4;
}

How does this translate into: “The info section covers all eight rows and the first three columns.”

Any illumination would be greatly appreciated! :pray:

grid-area takes four values separated by / in the format:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column end;

For the example you cited namely grid-area: 1 / 1 / 9 / 4; this means the info section has the following values:

  • grid-row-start is 1 and grid-row-end is 9. This translates to eight rows (9-1 = 8) starting from row# 1.

  • grid-column-start is 1 and grid-column-end is 4. This translates to three columns (4-1 = 3) starting from column# 1.

Note: Instead of specifying the grid-row-end and/or grid-column-end by row# or column#, you can also use span to specify how many rows or columns should be taken up. You may want to revisit the exercise form the CSS Grid Essentials section for a refresher on grid-area: https://www.codecademy.com/courses/learn-css/lessons/css-grid-i/exercises/grid-area

1 Like