The z-index feature allows you to set the z-index of the widgets within the section grid or the child widgets inserted into a parent Widget, such as Grid or Carousel containers.

The z-index is a CSS property that allows an element to be rendered on top of or behind another element that shares the same spatial location. It's similar to stacking separate images as different layers in Photoshop. 


As a default, all elements start with the same z-index value; this means the second element will go on top of the first one (Fig 2). In Fig 2, the second element is the blue circle, so it appears on top of the first element, the red star, by default.  As an example, Fig 2 below shows a large circle icon that was inserted as the second element. It has been placed so that it partially shares the location of the first element, a star icon. Given they have the same initial z-index value and the circle icon was inserted after the star, it partially covers the star.

Fig 2

If you assign the second element (the blue ball) a lower z-index number, it will be rendered behind the first element (the red star) (Fig 3).

Fig 3

The Style menu includes several features. For more information, read the relevant article: