Why Does Clip-Path Affect Element Stacking Order?

Why Stacking Order Changes with clip-path

When an element has clip-path applied, it creates a new stacking context, similar to how opacity affects stacking order with values less than 1. This is specified in the CSS specification, which states that "A computed value of other than none results in the creation of a stacking context the same way that CSS opacity does for values other than 1."

The stacking order is determined during painting. The following steps occur in order:

1. Elements with position, opacity less than 1, or transform other than none create a new stacking context.
2. Positioned descendants with z-index: auto or z-index: 0 are placed in the parent stacking context.
3. In-flow, non-positioned descendants are placed in the parent stacking context.

In the example provided, the element with clip-path is painted in step 1 and creates a new stacking context. The image element, which does not have any position set, will be painted in step 3, after the stacking context created by the clip-path element.

This is why the image appears underneath the header, even though it appears later in the DOM code.

Solution:

To fix this issue, you can set position: relative on the image element. This will cause it to be positioned relative to its normal position, and it will therefore be inserted into the stacking context created by the clip-path element in step 1. As a result, the image will appear above the header element.

Opacity Example:

The same behavior can be observed with opacity. If the header element has an opacity of less than 1, it will also create a new stacking context and the image will appear underneath it without a position property.

The above is the detailed content of Why Does Clip-Path Affect Element Stacking Order?. For more information, please follow other related articles on the PHP Chinese website!