v4: Add z-index to .custom-check to fix custom checks in CSS columns

[mdo]

For some reason, custom checks in CSS columns need a new stacking order to maintain visibility. This PR adds z-index: 1 to trigger that new stacking order. Since v5's forms are being redone entirely, and we're dropping IE10/11 there, I think this is totally fine to ship with v4 only. Will need to check v5's forms it in Edge though.

Fixes #29607.

[ffoodd]

FYI CSS columns trigger a new containing block, just as transform and perspective.

I mentionned the spec in another issue this week with transform: scale(1); as a workaround.

Don't know if it needs to be mentionned in the docs, but at least in the PR 😉

[XhmikosR]

@MartijnCuppens LGTY, too?

[dmudro]

@mdo in my app, adding z:index: 1 to custom control caused a visual bug. imagine a complex form with a dropdown already using z:index: 1 for its overlay in expanded state (menu); since this the custom control comes after the dropdown in the form, it overlays the expanded menu.

so I traced the source of the issue and found this changed shipped in v4.5.1.

bumping up the z-index on the other component was an obvious fix in my case but touching z-index is always tricky. I wonder how many affected apps are out there and I if there was an alternative solution for solving the original bug #29607.

[davidscotson]

Like the user above, this triggered a couple of visual bugs for us where custom controls were show up through dropdowns.

Since the original bug seems to be IE11 and old Edge specific, perhaps targetting the fix to only those browsers would be a worthwhile compromise? That's what we intend to do locally anyway.

[XhmikosR]

Please make a new issue if you think this still applies.