kraftner/index.html

## index.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style class="cp-pen-styles">
    #back {
  width: 100vw;
  height: 100vh;
}

#iframe {
  position:fixed;
  top:300px;
  left:300px;
  background-color:red;
  width:300px;
  height:300px;
}

#top {
  position:fixed;
  top:350px;
  left:350px;
  width:100px;
  height:100px;
}


    </style>


</head>

<body>
<div id="back">back</div>
<iframe id="iframe" src="http://bl.ocks.org/kraftner/raw/d59ff5f45d8d178cf5e7/"></iframe>
<div id="top">TOP</div>
<script>
var el = document.getElementById("top");
el.addEventListener("click", function( event ) {
    console.log('outside'+Math.random());
  }, false);

</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style class="cp-pen-styles">
	#back {
	width: 100vw;
	height: 100vh;
	}

	#iframe {
	position:fixed;
	top:300px;
	left:300px;
	background-color:red;
	width:300px;
	height:300px;
	}

	#top {
	position:fixed;
	top:350px;
	left:350px;
	width:100px;
	height:100px;
	}


	</style>


	</head>

	<body>
	<div id="back">back</div>
	<iframe id="iframe" src="http://bl.ocks.org/kraftner/raw/d59ff5f45d8d178cf5e7/"></iframe>
	<div id="top">TOP</div>
	<script>
	var el = document.getElementById("top");
	el.addEventListener("click", function( event ) {
	console.log('outside'+Math.random());
	}, false);

	</script>
	</body>
	</html>