Taming z-index using a file named _layers.scss

_layers.scss

// Layer 1
// ============================================================================
.listing-card,
.scroller-navigator {
  z-index: 1;
}

// Layer 2
// ============================================================================
.loading-overlay.as-background, //This is used for .tabs only, any other time use .loading-overlay (without .as-background).
.tab-rollout.shown {
	z-index: 2;
} 

// Layer 3
// ============================================================================
.tabs {
	z-index: 3;
} 

// Layer 4
// ============================================================================

.loading-overlay,
.favourite-options-email,
.email-options-dialog,
.custom-select-list {
	z-index: 4;
}

// Layer 5
// ============================================================================
.overlay,
.modal,
.alert-bar {
	z-index: 5;
}

// Layer -1
// ============================================================================

// Special case. On some tablets on the Results page the swipe to watchlist
// icon is visible on the non-swipey gallery cards if you: leave the page, 
// switch from portrait to landscape, then come back. The JavaScript is
// supposed to fix this but it doesn't seem to in some cases.
.listing-card-status {@include respond-to(tablet) {z-index: -1;}}