3 Ways to Overlay Overlapping Elements

In this short article, we will analyze one of the typical tasks of a Frontend developer.

Given: two overlapping elements.

Task: the upper element must have transparency so that the lower element is visible under it

<div class="block-1">
  Block 1
</div>
<div class="block-2 transparent">
  Block 2
</div>

.block-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  background: #0000ff;
  color: #fff;
  font-size: 32px;
}

.block-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  background: #ff0000;
  color: #fff;
  font-size: 32px;
}

.transparent {
  // here we will add transparency to the upper block
}

Method 1. opacity

The most obvious way is to use the opacity property

.transparent {
  opacity: 0.7;
}

Alternatively, transparency can be added through a filter.

.transparent {
  filter: opacity(0.7);
  filter: alpha(opacity=70); // for InternetExplorer
}

This approach has one significant drawback. The entire block becomes transparent, along with all its contents, which is not always appropriate. In this particular case, the text also becomes transparent, which reduces its contrast ratio

Method 2. background-color

Another way is to make only the background of the block transparent using the alpha channel.

RGBA

To do this, use the CSS rgba function. The function takes 4 arguments: red, green, blue and alpha. Accordingly, in order to use it, we need to convert our HEX color to RGB and add the desired alpha. To convert Hex to RGB, you will need to perform a simple arithmetic calculation. For convenience, you can also use a standard calculator that supports a 16-digit number system or use any of the huge number of online services.

FF 00 00 = rgba(255, 0, 0) = rgba(255, 0, 0, 1)

or

rgba(255, 0, 0, 0.7) - где alpha = 0.7

Thus we get

.transparent {
  background-color: rgba(255, 0, 0, 0.7);
}

We will consider the disadvantages of this method a little below, but for now, I will present another similar option.

HEXA

Similarly, the alpha channel can be added not via RGBA, but directly to HEX, or rather HEXA. In this format, the alpha channel can be set to a 16-digit number, just like the three primary colors.

FF 00 00 (hex) = rgba(255, 0, 0, 1) = FF 00 00 FF (hexa)

or

rgba(255, 0, 0, 0.7) = FF 00 00 B2 (hexa)

Thus we get

.transparent {
  background-color: #ff0000b2;
}

HSLA

Another method to add an alpha channel is HSLA. The function works the same as the first two, only instead of red / green / blue, it takes Hue / Saturation / Lightness.

FF 00 00 = hsl(0, 100%, 50%) = hsla(0, 100%, 50%, 1)

or

rgba(255, 0, 0, 0.7) = hsla(0, 100%, 50%, 0.7)

Thus we get

.transparent {
  background-color: hsla(0, 100%, 50%, 0.7);
}

In most cases, the alpha channel is enough to solve the problem with transparency, but this method also has one drawback. In the case of a complex background (for example, an image), it will not work.

Method 3. mix-blend-mode

Another alternative option. Instead of making the element transparent, let's use the browser's color overlay mechanism. The mix-blend-mode property will help us with this. It has many different meanings, you can find out more about them in the documentation. For example, let's try the multiply value

.transparent {
  mix-blend-mode: multiply;
}

It is worth saying that this method, after all, does not add transparency to the element, it allows you to mix / overlay the colors of different elements in one way or another, however, it solves the main function of our initial task. A big plus is the fact that not only color can act as a background, but also an arbitrary image.

Conclusion

In this article, I have presented 3 main ways to overlay two elements on top of each other. Everyone has their pros and cons. As in many other cases, in practice, there is no one 100% universal method. Different approaches are required in different situations. However, these three are enough to close any potential case.

My telegram channels:

Русская версия: https://blog.frontend-almanac.ru/bc7wY91j1Hr