Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css2][css-tables] z-index property should apply to table wrapper box instead of table grid box #11689

Open
InvalidUsernameException opened this issue Feb 10, 2025 · 1 comment
Open

[css2][css-tables] z-index property should apply to table wrapper box instead of table grid box #11689

InvalidUsernameException opened this issue Feb 10, 2025 · 1 comment
Labels
CSS2 css-tables-3 Current Work

Comments

@InvalidUsernameException
Copy link

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: fixed and z-index: auto
  • the table grid box has position: static and z-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.
@Loirooriol
Copy link
Contributor

The table wrapper box is the principal box, so IMO by default properties should apply to it.

And that's precisely what's happening on browsers, not just for z-index but also for align-self, clear, zoom and several others.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS2 css-tables-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Loirooriol @InvalidUsernameException