In the markup below, why does `.modal` (z-index: 1) render ON TOP of `.tooltip` (z-index: 9999) even though the tooltip has a far higher z-index?

.card { position: relative; z-index: 2; } .modal { position: relative; z-index: 3; } .tooltip { position: absolute; z-index: 9999; } /* child of .card */