Why Does a Negatively Margined Div Appear to Slide *Between* the Content and Background of Another Div?

Content Overlapping by Overlapping Elements: Understanding the Puzzle

Introduction

In this context, we have two divs without any complex styling (simply background-color). We are manipulating the second div to overlap the first one by applying a negative margin-top. However, instead of seeing one element completely overlapping the other, we find the second div sliding between the content and the background of the first div, exhibiting an unexpected behavior.

The Painting Order

To understand this behavior, we need to delve into the intricacies of the painting order in browsers. The painting order for elements within a stacking context follows a predefined sequence:

1. Background color of the element, even if it's the root element.
2. Background image of the element, even if it's the root element.
3. Content of the element, such as text and images, painted from bottom to top.
4. Background and border of child elements.

Explaining the Overlap

In our example, when the second div overlaps the first, the following painting sequence occurs:

1. Background color of the second div is painted over the first div's background.
2. Content of the first div is painted.
3. Content of the second div is painted on top of the first div's content.

Since the content of the first div is painted before the background of the second div, the text appears to be positioned above the green background, creating the illusion that the second div is sliding between them.

Changing the Behavior

While the default painting order can lead to such situations, it's possible to modify the behavior by setting the opacity of the overlapping element to a value less than 1. This triggers the opacity painting step before the content painting step, ensuring the overlapping element's background appears beneath its content.

In our example, adding opacity: 0.9999 to the second div leads to the expected behavior, where the green background completely covers the first div's content.

Reference

For a detailed explanation of the CSS paint order, refer to the official W3C documentation:

https://www.w3.org/TR/css-backgrounds-3/#box-painting

The above is the detailed content of Why Does a Negatively Margined Div Appear to Slide *Between* the Content and Background of Another Div?. For more information, please follow other related articles on the PHP Chinese website!