<div class="codedoodle-block">
			
			<h1 class="one">Header</h1>
			<h1 class="two">Header</h1>
			<div class="three"><p>This text should move to show the text positioned below it in terms of z-inde.</p></div>
			<div class="four"><p>This text should move to show the text positioned below it in terms of z-index.</p></div>

</div>

/* Animation */
		
		@keyframes movetofront {
			from{ z-index: 5; transform: translateY(0); }
			to{ z-index: -1; transform: translateY(10px); }
		}
		
		@keyframes movetofronttwo {
			from{ z-index: 5; transform: translateY(0); }
			to{ z-index: -1; transform: translateY(4px); }
		}
		
		/* -- End anim -- */
		
		.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			background-color: #fefefe;
			position: relative;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 1rem;
			max-width: 320px;
			grid-gap-marker: solid 1px black;
		}		
		
		.one {
			grid-column: 0 / 1;
			grid-row: 0 / 1;
			font-size: 2rem;
			color: red;
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.two {
			grid-column: 0 / 1;
			grid-row: 0 / 1;
			font-size: 2rem;
			color: blue;
			z-index: 0;
			animation: movetofront 5s ease-in-out 0s infinite alternate backwards;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.three {
			grid-column: 1 / 3;
			grid-row: 3 / 4;
			z-index: 1;
			position: relative;
				}
				
		.three p {
			position: absolute;
			top: 0;
			left: 0;
			color: gray;
		}
		
		.four {
			grid-column: 1 / 3;
			grid-row: 3 / 4;
			z-index: 1;
			position: relative;
		}
		
		.four p {
			position: absolute;
			top: 0;
			left: 0;
			animation: movetofronttwo 2s ease-in-out 5s infinite alternate backwards;
		}