Why Does `clip-path` Change the Stacking Order of HTML Elements?

Why Clip-Path Modifies Stacking Order: A Deeper Dive

In the world of CSS, we often deal with the stacking order of elements, where elements positioned further up in the code are generally drawn atop those positioned below. However, certain properties, such as clip-path, can disrupt this expected stacking order, leading to unexpected results.

Consider the following CSS code:

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

When applied to a heading (

), this code defines a custom shape using clip-path. However, if an image is positioned below this heading, we encounter an unexpected behavior. The image, which should visually appear above the header due to its later position in the code, ends up underneath it.

To comprehend this behavior, we must understand that clip-path, similar to CSS opacity, establishes a new stacking context. In the painting order defined by CSS, elements creating stacking contexts are positioned before non-positioned elements.

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

 - All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
 - All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
 - All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

In our example, the element with the clip-path property is painted in step 8, while the image, lacking any positioning, is painted in step 4. Despite appearing later in the code, the image is painted before the clipped header due to the stacking context created by clip-path.

To rectify this, one can explicitly define position:relative on the image. This positions the image, causing it to be placed in the same stacking context as the clipped header. The tree order then determines that the image is rendered above the header.

img {
  margin-top: -10em;
  position:relative;
}

In conclusion, clip-path, like CSS opacity, establishes a stacking context, affecting the painting order of elements. By understanding these concepts, we can control the stacking behavior and achieve desired visual outcomes.

The above is the detailed content of Why Does `clip-path` Change the Stacking Order of HTML Elements?. For more information, please follow other related articles on the PHP Chinese website!