Description
Consider the following testcase:
<!DOCTYPE html>
<style>
div {
position: fixed;
width: 100px;
height: 100px;
}
#behind {
background-color: red;
z-index: 1;
}
#in-front {
background-color: green;
display: table;
z-index: 2;
}
</style>
<div id="behind"></div>
<div id="in-front"></div>CSS 2.2, 17.4 Tables in the visual formatting model states:
[...] the table generates a principal block box called the table wrapper box that contains the table grid box itself and any caption boxes (in document order). The table grid box is a block-level box that contains the table’s internal table boxes.
and
The computed values of properties position, float, margin-*, top, right, bottom, and left on the table element are used on the table wrapper box and not the table grid box; all other values of non-inheritable properties are used on the table grid box and not the table wrapper box. (Where the table element’s values are not used on the table and table wrapper boxes, the initial values are used instead.)
An equivalent formulation can be found in in CSS Table Module Level 3, 3.6.1. Overrides applying in all modes.
Based on these rules, the following happens for the #in-front element:
- the table wrapper box has
position: fixedandz-index: auto - the table grid box has
position: staticandz-index: 2.
Because z-index has no effect on elements with static position, it is effectively ignored, causing the #in-front element to be rendered behind the #behind element. As a result a red square must be displayed.
This contradicts observed behavior in Chrome and Firefox where instead the green square is displayed. This problem was discovered in LadybirdBrowser/ladybird#3533 where these rules are implemented based on above wording and a red square is displayed. Also the Ladybird implementation causes severe layout issues on a website which the above test case was reduced from.
Changing the Ladybird implementation to include z-index in the properties that apply to the table wrapper box instead of the table grid box "fixes" the Ladybird behavior both for this reduced test case and for the layout issues on the original website. Therefore, I think the formulation needs to be adjusted so that z-index is included in the list of properties that are used on the wrapper box.