Why Does CSS Content Overlap But Not Backgrounds?

Content Overlaps but Background Does Not

Within CSS, the painting order of elements follows a specific hierarchy. When an element overlaps another, the contents of the overlapping element are rendered on top. However, the background of the overlapping element is not affected. Instead, it remains in its initial position.

To understand this behavior, it's important to refer to the [W3C paint order documentation](https://www.w3.org/TR/css-backgrounds-3/#the-painting-order). It outlines the following order:

1. Background color of the parent element
2. Background image of the parent element
3. Content of the child element (excluding backgrounds and borders)
4. Background color of the child element
5. Background image of the child element
6. Borders of the child element

In your provided code, the background of the ".box" element is painted in point 4. The background of the ".bottom" element is also painted in point 4. However, the content of the ".bottom" element (the text) is not painted until point 3 of the next nested element (which is the root element in this case).

Therefore, the content of the ".bottom" element appears to be in front of the background of the ".box" element because the text is painted after the background of the ".box" element but before the background of the ".bottom" element.

To modify this behavior, you could apply a low opacity to the ".bottom" element, which would place its content in the stacking order before the background and borders of the ".box" element.

The above is the detailed content of Why Does CSS Content Overlap But Not Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!