<!-- https://jsbin.com/cinabatiwu/edit?html,css,output -->

	<section>
		LALALA
		<div class="dropdown">DROPDOWN (z-index: 9999)</div>
	</section>
	
	<div class="modal">MODAL (z-index: 1)</div>
	
	
	<style>
	  
	  section {
	border: 1px solid;
	padding: 2rem;
	opacity: 0.99; /* fking stacking context see above */
	
	
}

.dropdown { 
	z-index: 9999; 
	position: absolute;
	width: 300px;
	height: 300px;
	background: red;
	padding: 1rem;
} 


.modal { 
	z-index: 1; 
	position: absolute;
	width: 300px;
	height: 300px;
	background: green;
	padding: 1rem;
} 


/*
https://medium.com/@sanjeevanibhandari3/the-stacking-context-problem-nobody-understands-0ba7962545ec

position + z-index (on a non-static element)
transform (even tiny ones)
opacity: 0.99 (yes, even that)
filter
perspective
mix-blend-mode
isolation: isolate
will-change
contain: paint

*/
	  
	</style>