IntroJs stacking context bug

<html>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/usablica/intro.js/master/introjs.css">
<script src="https://raw.github.com/usablica/intro.js/master/intro.js" type="text/javascript"></script>
<script>
</script>
<style>
	.head {
	    height:10px;
	    width:300px;
	    background: rgba(0,0,255,0.5);
	    position:relative;
	    z-index:2;
	    border:2px solid blue;
	}

	.content {
	    height:150px;
	    width:250px;
	    background: rgba(255,0,0,0.5);
	    border:2px solid red;
	    position:absolute;
	    top:45px;
	    left:25px;
	    z-index:1;
	    padding:5px;
	}
</style>
<body>
<p onclick="introJs().start();">Click here to start tutorial.</p>
	<div class="head"></div>

	<div class="content">
	    <p data-intro='This is a bug!' data-step='1'>blah blah text</p>
	</div>
</body>
</html>