Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
div { position: relative; z-index: 0; contain: strict;
display: inline-block; background: green;
left: 30px; top: 30px; width: 120px; height: 120px; }
#scope { background: #eee;
left: 40px; top: 40px; width: 490px; height: 190px; }
#tr { background: orange; left: 60px; }
p { position: absolute; left: 100px; top: 5px; font-size: 30px; }
</style>
</head>
<body>
<div id=scope>
<div></div><div id=tr></div>
</div>
<p id=outside>TRANSITIONING</p>
</body>
</html>