Month: December 2022

Sometimes an approved user interface design requires us to overlap HTML elements. This article describes how to do this with just HTML and CSS using the CSS grid layout.

The primary aim of the examples in this article is to prove a point. They may meet your requirements with similar code but may not fit exactly.

HTML

Starting with the definition of the HTML, we need at least three elements: the grid container, the background element, and the foreground element.

<div class="grid-container">
  <div class="background">
    This is the background
  </div>
  <div class="foreground">
    This is the foreground
  </div>
</div>

The grid container wraps each of the elements that need to be overlapped. Meanwhile, the child elements have classes specifying where in the grid the browser should place them.

Thereupon we can control which elements overlap implicitly via the order of HTML elements specified in the grid container. Conversely, we can explicitly control them with the z-index CSS property.

CSS

Although the HTML has been defined, the CSS still needs to be specified. The CSS is more involved and includes detail about the CSS grid. Therefore, understanding these details will allow you to change this code to meet your requirements.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  
  .background {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
  }
  .foreground {
    grid-column: 2 / 4;
    grid-row: 3 / 5;       
  }
}

The Grid to Overlap HTML

The grid container specifies the definition of a 4 x 4 grid. I am using fr units for ease of use in this article. Your requirements may differ. Learn more about the flex value here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value.

Firstly, a grid’s definition includes setting the display property to grid. Additionally, the grid-template-columns and grid-template-rows CSS properties define the rows, columns and their sizes. Learn more about CSS grid layout at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Furthermore, we still need to specify where elements are placed within the grid. As an illustration using the CSS above, the background class positions an HTML element behind the foreground. Do this by setting the shorthand properties grid-column and grid-row to span more of the grid than the foreground.

To clarify, the grid-column property specifies the horizontal start and end edges of the HTML element within the grid.

Similarly, the grid-row property specifies the vertical start and end edges of the HTML element within the grid.

Remember: The grid’s edges start at 1, yet the end is one more than the number of rows or columns in the grid. We are specifying an edge not a cell.

In addition to the background class, we need to create the foreground class. The foreground class positions an element in front of the background element. Much like the background class, do this using the grid-column and grid-row properties.

Even though a requirement to overlap HTML elements can mean several things, adjusting the background class’s grid-column and grid-row properties can help position the background element to better match your requirements.

Overlap HTML

In summary, defining the CSS grid layout allows us to overlap HTML elements with just HTML and CSS. To that end, the grid-column and grid-row specify where each element is placed within the grid.

To demonstrate, the image below shows the grid lines from Google Dev Tools. You can see the 4 x 4 grid and the positions of the HTML elements.

See a working example using jsfiddle below or https://jsfiddle.net/asusultra/5cho1p2g/2/.

Note: You may notice that I use a few CSS properties for colors, height, and width. This is only for display purposes.