CODEWITHSUNDEEP
htmlcssposition
Michael
Michael

Reputation: 9402

how do i make absolutely positioned text within a relatively positioned parent work?

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;">&nbsp;2</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;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;">&nbsp;6</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;7</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;8</span>
</span>
</body>
</html>

Upvotes: 0

Views: 113

Answers (3)

ShibinRagh
ShibinRagh

Reputation: 6656

I found the issue,

You have to set a float on wrapper span

eg 

<span style="position:relative; float:left; ">

   <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;">&nbsp;2</span>
   <span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
   <span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;4</span>

</span>

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

span elements are inline, and inline elements do not have dimensions... that is why your elements get misplaced.

setting the outer spans to be display:inline-block fixes the issue..

(you need to also remove the position:absolute from the second image, as that takes it out of the flow, and the containing span does not get a size..)

Demo at http://jsfiddle.net/gaby/btUBm/

Upvotes: 0

David
David

Reputation: 10625

It might be because the span needs to be a block level element. Try adding 'display: block; to your 'position: relative' elements.

Upvotes: 0

Related Questions