All geek questions in one place

Inline-Block Inside Position: Absolute Element

My question is simple: what happens to inline block elements inside absolutely positioned elements? I have a small example to illustrate what I mean. It is hard to explain otherwise. The question is why the .icon inside the .tag does not fit like the previous .icon (i.e. inside 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>
+4
source share
3 answers

Actually, the icon acts in exactly the same way. To check, try to set the style

 display: inline-block; width: 50px;

When you create the position of the tag: absolute, this leads to the fact that the tag no longer has an automatic width of 100% of its parent element, but rather has a minimum width that it can accept according to the heuristic in the browser (browser dependent) . The built-in block acts like "inline", like an image, and thus ends on the next line with the first probability (which is located immediately after the word "tag").

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

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

+6
source

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

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

0
source

this is not positioning - it is an element containing the class "icon". In one, you got the usual inline a other sub-installation, where the parent level of the h2 block means that your "inline-bock" has different line heights and vertical alignment.

0
source

Source: https://habr.com/ru/post/1347368/

More articles:


All Articles