the-pudding / blog_scrollytelling-sticky Goto Github PK

I was wondering how you managed to get the text in front of the graphic in the text overlay (scrolly-overlay) example. This is the HTML I am looking at in scrolly-overlay.hbs:

`

<figure class='sticky'>
	<div class='bar-outer'>
		<div class='bar-inner'></div>
	</div>
</figure>

<article>
	<div class='step' data-width='10%' data-index='0'><p>Bar is 10%</p></div>
	<div class='step' data-width='90%' data-index='1'><p>Bar is 90%</p></div>
	<div class='step' data-width='50%' data-index='2'><p>Bar is 50%</p></div>
</article>

I tried to reproduce my own example using similar HTML, and the graphic is always in front of the text. I know z-index is a way to change stack order, but I don't see it being used in scrolly-overlay.styl. Is there another technique you are using, or I am just missing something?

Thanks for these awesome tutorials, they are super helpful.