CODEWITHSUNDEEP
htmlcsscss-position
noio
noio

Reputation: 5812

Inline-Block inside position:absolute element

My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)

The code below can be viewed @ http://jsbin.com/itole4/5

<html>
<head>
    <style>
        .field { position: relative; border: 2px solid black;}
        .tag   { position: absolute; left: 100%; top: -2px; background: black; color: white;}
        .icon  { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
    </style>
</head>
<body>
    <a>Some text <span class='icon'>X</span> </a>
    <h2>
        <span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
    </h2>
    <h2>
        <span class='field'>Some Text</span>
    </h2>    
</body>
</html>

Upvotes: 4

Views: 3897

Answers (3)

Sajid
Sajid

Reputation: 4421

Actually, the icon is acting exactly the same. To test, try setting a's style to

display: inline-block; width: 50px;

When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").

So the short answer is: the icon is acting the same, but the block containing it is not.

In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)

Upvotes: 6

clairesuzy
clairesuzy

Reputation: 27624

it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment

Upvotes: 0

John
John

Reputation: 7880

because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body

I can't explain it better in English >.<, i hope you can understand

Upvotes: 0

Related Questions