Positioned elements should be painted in front of others #30428
Description
<!DOCTYPE html>
<style>
.wrapper { display: inline-block; width: 100px; height: 100px; border: 5px solid }
</style>
<div class="wrapper">
<div style="height: 50px; position: relative; left: 50px; background: cyan"></div>
</div>
<div class="wrapper"></div>| 2020 (bad) | 2013 (good) |
|---|---|
 |
 |
See https://drafts.csswg.org/css-position-4/#paint-a-stacking-context, the back-to-front order is
- Positioned with negative z-index
- Non-positioned
- Positioned with
z-index: autoorz-index: 0 - Positioned with positive
z-index: 0