Can someone help me understand why the span is positioned at the bottom of the root span instead of at the top? Here's a link to my Plunker:
/* Styles go here */
span {
background-color :#808080;
}
canvas {
background-color:#800000;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<span style="position:relative">
<canvas width="100" height="100">
</canvas>
<span style="position:absolute; left:0px; top:0px;">after</span>
</span>
</body>
</html>I was expecting the "after" string to appear at the top of the dark-red area, not at the bottom. I've set the outer span's position to relative, which should act as the anchor for the child elements with absolute positioning.
The inner span is set to position absolute with top=0px, left=0px; so it should be placed at the upper left corner of the outer span.
However, the outer span doesn't seem to enclose the canvas, which I find confusing. Could someone explain why this is happening? This might be the reason why the inner span is not positioned at the top left corner as expected.