I’m a bit baffled as to why I can’t position things the way I expect.
In the example below, I am expecting each number to be in a different corner of the square. Yet, for the first square, it appears that the “top:0px” isn’t doing what I expect, and in the second square it is even worse, with the text that is supposed to be in the green square actually winding up in the blue square. The only difference is that I have explicitly given the second image an absolute position. I had to give it a position relative to “bottom” because if I use top, which I would expect to work, then the entire second image is vertically offset to nearly the bottom!
What is going on here? I have been fighting for this for hours trying to accomplish what I thought should be a simple task.
<!DOCTYPE html>
<html>
<head>
<body>
<span style="position:relative; ">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Solid_blue.png">
<span style="position:absolute; top:0px; left:0px;">1</span>
<span style="position:absolute; bottom:0px; left:0px;"> 2</span>
<span style="position:absolute; top:0px; right:0px;"> 3</span>
<span style="position:absolute; bottom:0px; right:0px;"> 4</span>
</span>
<span style="position:relative;">
<img style="position:absolute; bottom:0px; left:0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">
<span style="position:absolute; top:0px; left:0px;">5</span>
<span style="position:absolute; bottom:0px; left:0px;"> 6</span>
<span style="position:absolute; top:0px; right:0px;"> 7</span>
<span style="position:absolute; bottom:0px; right:0px;"> 8</span>
</span>
</body>
</html>
I found the issue,
You have to set a float on wrapper span
eg