<header>
<div class="big-thing">
Big Thing
</div>
</header>
<main>
</main>
header {
background: lightgreen;
/* these trigger a stacking context */
position: relative;
z-index: 1;
/* but also could be ANY of these, for example...
opacity: 0.99;
mix-blend-mode: darken;
contain: layout;
isolation: isolate;
*/
}
.big-thing {
position: absolute;
right: 30px;
top: 10px;
width: 110px;
height: 110px;
background: white;
border-radius: 50%;
display: grid;
place-items: center;
z-index: 9999;
}
main {
position: relative;
z-index: 2;
background: tan;
}
body {
margin: 0;
block-size: 100vh;
display: grid;
grid-template-rows: 80px 1fr;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.