CSS Master

Figure 4.10. Multiple elements in a stacking context

Handling Undesired Behaviors with opacity

Becauseopacitytriggersanewstackingcontext,youmayrunintoundesired

behaviorwhentransitioningtheopacityoflayersthatoverlap.Toworkaround

this,usergba()orhsla()valuesforcolororbackground-colorandtrans-

itionthoseinstead.

Let’slookatanexampleofusingthestackingcontexttomanagelayersandposi-

tionedelements.Inthiscase,we’llcreateamenuthatslidesinfromthetopofthe

screen.ButratherthanslideinoverthelogoandMenubutton,we’llmakeitslide

inbeneathit.FirstourHTML:

04-layouts/stacking-context.html (excerpt)

<header>

<img src="dont-awesomenews.svg">

<button type="button" id="menu">

<img src="dont-menu.svg">

</button>

<nav>

<ul id="menu-list">

<li><a href="/sports">Sports</a></li>

<li><a href="/politics">Politics</a></li>

<li><a href="/arts">Arts & Entertainment</a></li>

142 CSS Master