Blog  Learn  Widget Demos  Developer Portal  Login to AB Tasty

Articles in this section

Z-index demystified

Avatar
Product Team
  • Updated
Follow

One of the complex (but how interesting) parts of webdesign is the z-index capacities. Some people call it layers or layering of elements.

If you are really new on the subject, we recommend you to start with the documentation below.

If you want to confirm a few doubts the limitations and principles of the z-index CSS property, you can directly check the MDN doc about the z-index CSS property. 

First of all, why is it called z-index?

Very simple.

In a 2-dimensions world (which is the case of the paper/print medium for example), you need two coordinates to position elements in the "universe".

In short, you need a x-axis (horizontality) and a y-axis (verticality), like this: 

01.jpg

By giving a value of both axis, you can define the position of something in the referential.

But in a 3D universe like space, real-life or a web page, you need a 3rd axis (z) to be able to position/locate "stuff", like this:

 

02.jpg

The "(z-)index" value is the position of an element on that axis

Now, you have to understand that the <body> element of a page is by default with a z-index value of 0, like this:

03.jpg

Obviously, you can change its z-index value with the z-index CSS property ; but if there is only one element at the same level of the <body> element, no good reason to change it.

All children of an element have the same value of z-index

Children elements of the <body> have a similar z-index. "It's all flat."

For example, in the following HTML snippet:

<html>
  <head></head>
  <body>
    <h1>Title</h1>
    <p>Lorem <a href="#">ipsum.</a></p>
    <img src="../img.jpg" />
  </body>
</html>

Body, the title, the paragraph, its contained link and the image all have a z-index value of 0 (by default).

But not all elements are children of <body>!

In some cases, for example, a sticky navbar, it needs to be displayed visually on "top" of <body>. So that, as you scroll down, it "remains" visible.

The elements which compose the navbar can be:

  1. children of <body>
  2. at same level of higher of <body>

The first case is the most common one.

In order to make the navbar "sticky", we give it a higher value of z-index. Let's say "1". We also have to give it a "position" value. Let's say "sticky".

So, as you scroll down, the <body> is moving up but the navbar is not.

Conditions to use z-index CSS property

  • z-index can only be defined on "positioned" elements, which means only on elements whose "position:" CSS property value is: "relative", "absolute", "fixed" or "sticky". "Static" is not accepted.
  • its value can be "auto" or any integer between "-2147483548" and "2147483547" (long story...)

 

Let's talk about AB Tasty widgets

Now, when you add an AB Tasty widget to your page and choose a "modal" layout (in a popin widget for example), you probably want it to be displayed "on top" of the <body> element.

So we took the decision to "inject" the widget container element at the same level of <body> in the page code and give it a higher z-index value (1).

04.jpg

This is why, you will see the popin "on top" of the page.

Now, let's imagine (if you have good reason or just being curious) that you want to display the widgets "under" the page (<body>). You are able to do it giving a lower value of z-index (for example: -1).

 

05.jpg

You're getting the idea. And that's good.

It's becoming trickier...

Now, let's say you want to display a widget between an element with a higher value of z-index than <body> and <body> itself or "on top" of this element.

You need to know the z-index value of this element "on top" of <body>. You can find it through to the inspecter of your browser.

  • If this element has a z-index value of 1, and if you want to display it on top, you will need to give the widget a higher value of z-index, for example 2.
  • If this element has a value of 1 and you want to display the widget between it and <body>, you'll need to give your widget a z-index value of 1 and a higher value to the already in place element.

06.jpg

 

Of course, all this is doable with custom CSS.

But, we came up with a handy solution for the widgets: a new component in the "Layout" tab called "Layer position (z-index)."

Capture_d_e_cran_2021-01-27_a__15.29.42.png

You will have 5 different options to choose from:

  • Above (will display the widget "on top of" anything, z-index value is: 2147483647)
  • Default (selected by default) (the widget is "on top of" <body>, z-index value is: 1)
  • Auto (the value will be "auto" and therefore, it will adapt to the z-index context already in place)
  • Under (will display the widget "under" <body>, z-index value is: -1)
  • Custom (a number input is shown and you can use any value between "-2147483548" and "2147483547")

If you are using the editor in Iframeless mode, the "above" option (value: 2147483147) displays the popin's underlay over the widget configuration panel and makes it uneditable. In order to avoid that, you can use the "custom" option and use this value: 2147483146.

 

Related articles

Comments

0 comments

Article is closed for comments.