Overlays

By default the dropdown renders floating above the rest of your page but it doesn't prevent the user from clicking on any other item. Overlays can fix that and make dropdowns look cooler.

What do you have to know:

• By default overlays have a semitransparent black background, but you can change that using the $ember-basic-dropdown-overlay-background SASS variable or target the .ember-basic-dropdown-overlay
• By default overlays have pointer-events: none, so it is transparent to clicks but you can change that using the $ember-basic-dropdown-overlay-pointer-events SASS variable or target the same class.

In the next section we'll talk more how to customize the styles.