When using a Grid-based grid, you can use the position
property values that you know. In most cases, they work as expected. But there are several things that distinguish positioning in block elements from positioning inside a grid container. In this tutorial, we'll look at how relative and absolute positioning works within a grid container, and whether it's possible to use the z-index
property.
When using relative positioning within a grid container, everything works the same as with relative positioning within another block. An item that has relative positioning shifts relative to its current location. The space it took is not redistributed in any way relative to other elements in the container. The grid is waiting for this element to return to its original place.
It is important to note that when you change the width of the viewport, a relatively positioned element will behave as though it were in its proper place. Like other elements inside the grid, it gets bigger and smaller depending on the available space inside the container. The place that the element has "come out" of also determines the size, depending on the grid settings. This can have a positive effect on the return of the element inside the grid.
In contrast to relative positioning, absolute positioning within a grid container is more complex and less obvious.
If the container has no relative positioning specified, it will work the way it does in the other block: the item is pulled from the flow, and the space is reallocated as if the item never existed.
After applying absolute positioning, the element no longer obeys the rules of the grid. Now, the size of the element is determined only by the size of the content. The grid-template-columns
and grid-template-rows
properties have no effect on such elements.
Some interesting possibilities can arise when you use a combination of relative and absolute positioning within a grid container.
Let's set the container to relative positioning. If you use the top
, right
, bottom
and left
properties of elements when the container is set to relative positioning, then everything will work as expected; the starting point will be the top-left corner of the container.
This is the most important bit: the absolutely positioned element inside the container is responsive to the grid-column
and grid-row
element placement properties! In this case, the starting point will be the top-left corner, where the element will be placed after applying these properties.
Move the element to the second row and the third column:
Now, regardless of the width of the viewport the element with absolute positioning will be on the second row and the third column.
That way, it's possible to superimpose different grid elements on top of each other so that they don't go off when you change the screen resolution. This can be an interesting feature on an adaptive or responsive site.
It's impossible to use implicit tracks when using absolute positioning. The main thing is that there is no way to use implicit tracks until they appear in the grid.
Let's add some elements to the grid and create an implicit grid. The resulting seventh track can now be used when positioning the fourth element.
You may be wondering why creating grids is so complex. At the outset, this approach may seem quite complicated and unhelpful, but today's internet is increasingly showing layouts with blocks laid out in non-standard ways. Take a look at the following layout:
Note what's happening with elements 2 and 5. When using absolute positioning, the width of the element is determined by the content within it. But we can limit the maximum width using the grid-column-start/end grid-row-start/end.
The fifth grid element has the following styles:
.grid-element-5 {
position: absolute;
grid-column: 3 / 5;
grid-row: 2;
}
The grid-column
property of this element was limited. Even when using absolute positioning, the item stays inside the grid and obeys some laws, including maximum dimensions. If we look at the grid using the web inspector, we see the following picture:
The second element now takes up little space, and it sits where the developer put it. The fifth element is limited by the grid-column
rule if there is a lot of content inside. This important feature allows you to control absolutely positioned content within the grid.
When using relative and absolute positioning within a grid, you can use the z-index
property. This property won't behave differently from normal. Using z-index
allows you to alternate elements within a grid container. This can be useful when the user is interacting with the site.
In this example, the block that appears when you hover the mouse cursor over it has absolute positioning. This allows this block to have a size that depends on the content inside. In this case, the neighboring block stays in its place all the time and doesn't disappear anywhere. This behavior allows you to do quite complex interactive things, primarily related to graphic design.
Find any image of art made in Swiss Style. Try and reproduce the whimsical way the elements are positioned. This is quite possible, since they were all made at one time according to similar grids.
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.