CSS - @keyframes and @layers

[Strange]

So I'm having a weird issue on my site where in my CSS style section, an element that uses @keyframes for a blink effect, causes blinking text to appear above all the other layers.
I've tried using (how I think) @layer wrapper works, but when I try to use it to wrap the @keyframes into a different layer, it borks the whole thing up and EVERYTHING gets separated.

The blink code is

Code

.blink {
	animation: blinker 3s ease-in-out infinite;
}
@keyframes blinker {
	50% {
	opacity: 0.3;
	}
}

And I'm using a few different #id's to separate stuff into layers using <div id="etc"> to make the orginal layer effect.
(Its a fake screen bezel, then a scanline layer, then writing behind that)

Spoiler

Code

	<style>
		#iconpic {
			background-image: url(Ashtray_03.gif);
			background-repeat: no-repeat;
			background-attachment: sticky;
			background-position: top 50px right 80px;
			padding: 100px;
		}
		#screen {
			
			background-repeat: no-repeat;
			background-attachment: sticky;
			background-position: top right;
		}
		#bezel {
			position: fixed;
			width:100%;
			height:100%;
			top:0;
			left: 0;
			pointer-events: none;
		}
		#scan {
			position: fixed;
			opacity: 0.7;
			width:100%;
			height:100%;
			top:0;
			left: 0;
			pointer-events: none;
		}
		#writing {
			color: #FFCC00;
			padding:50px;
			font-family:Courier New;
			font-size: 20px;
			text-shadow: 1px 1px 2px black, 0 0 1em #FFB000, 0 0 0.2em #FFB000;
		}
		#navibox {
			color: #FFCC00;
			font-family:Courier New;
			font-size: 20px;
			text-shadow: 1px 1px 2px black, 0 0 1em #FFB000, 0 0 0.2em #FFB000;
			padding-top: 00px;
			background-color: #3C393C;
			border:none;
			border-bottom: 1px double; #FFB000;
			border-left: 2px dashed; #FFB000;
		}
		.blink {
			animation: blinker 3s ease-in-out infinite;
		}
		@keyframes blinker {
			50% {
				opacity: 0.3;
			}
		}
		audio {
		padding:150px;"
		}
		body {
			background-color:#3C393C;
		}
	</style>

[close]

So right now the blinking text (and ONLY the blinking text) appears above the bezel.
You can see it hereif you resize the window to make the blinking text scroll over the bezel

[Melooon]

If the blinking over bezel is the only issue; just set a high z-index on the bezel (z-index: 10;) - I don't exactly know why CSS animations mess with the rendering order sometimes (if someone does know please explain) - however usually you can just do some z-index hacks to work around issues like this!

[Strange]

Yessssssss! That worked! Ok perfect! I hadn't heard of z-index's yet so thats a good bit of info to learn!
Thanks!

[Dan Q]

I suspect the main problem was you misuderstood what CSS @layers are. Which is understandable, because it's a terrible name for the feature!

What @layers are not

CSS @layers are NOT like layers in graphics software. They're not about putting content visually "in front of" or "behind" other content! For that, you want to either (a) put your HTML in order to so that deeper and later things naturally appear on top of earlier things, or (b) use CSS z-indexes as @Melooon observes (and, just sometimes, clever use of position: directives to hack around problems!).

What @layers are

(You can skip this bit if you like. 95% of people don't need to know what @layers are!)

CSS @layers are a powerful way to affect the precedence/specificity of CSS rules. Normally, for example, an ID beats a class name beats an element name when referring to an element, e.g:

Code

<p id="foo" class="bar">My text!</p>

<style>
#foo { color: green;  } /* everything of id="foo" is green     */
.bar { color: yellow; } /* everything of class="bar" is yellow */
p    { color: red;    } /* "all paragraphs are red             */
</style>

In my complicated example above, the words "My text!" will be green. That's because ID-based matching "beats" class-based matching which in turn "beats" element name based matching.

The rules are more-complicated than that, but that's a starting point. But suppose you had two stylesheets, and maybe you can't change either of them because they're coming from a CDN or they're managed by different teams in your organisation? CSS @layers can rescue you without having to write !important in lots of places.

Most people on this forum aren't in that kind of position, so most people on this forum don't need @layers, IMHO.

[Melooon]

Most people on this forum aren't in that kind of position, so most people on this forum don't need @layers, IMHO.

I was literally in this position two weeks ago and wrote a bunch of !important flags I will have to remember this one, but I do agree most people here wont need it.

[ribose]

What @layers are

thanks so much for writing this! i agree that the name is not very good; i might not have ever looked into @layers because they didn't seem relevant to me.

but i think i may actually have a use for them! i've been getting interested in writing userstyles for sites that i visit all the time, and (like Melon mentioned in the message above) sometimes i have to slap a bunch of !importants to get the styles to apply. wrapping everything in a @layer sounds like a much nicer way to do this!