Внутренний блок внутри позиции: абсолютный элемент - PullRequest
4 голосов
/ 09 апреля 2011

Мой вопрос прост: что происходит с элементами inline-block внутри абсолютно позиционированных элементов? У меня есть маленький пример, чтобы проиллюстрировать, что я имею в виду. Трудно объяснить иначе. Вопрос в том, почему .icon внутри .tag не позиционируется как предыдущий .icon (то есть inline и справа от текста)

Код ниже можно посмотреть @ 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>

Ответы [ 3 ]

6 голосов
/ 09 апреля 2011

На самом деле значок действует точно так же.Чтобы проверить, попробуйте установить стиль a в

display: inline-block; width: 50px;

Когда вы устанавливаете позицию тега: absolute, это приводит к тому, что тег больше не имеет автоматической ширины 100% от его родителя, а скорее имеет минимальныйширина может принимать в соответствии с эвристикой в ​​браузере (зависит от браузера).Встроенный блок действует как «встроенный», как изображение, и, таким образом, при первой возможности переносится на следующую строку (то есть сразу после слова «тег»).

Итак, краткий ответ:Значок действует так же, но блок, содержащий его, не является.

Чтобы заставить значок на той же строке, что и в первой строке, вы можете добавить white-space: pre;.См .: http://jsbin.com/itole4/6 (см. Также комментарий ниже)

0 голосов
/ 09 апреля 2011

это не позиционирование - это элемент, содержащий класс "icon" ... в одном у вас есть простой inline a, во втором - вложенная установка, где родительский уровень - уровень блока h2 это означает ваш "inline-bock" имеет различную высоту строки и вертикальное выравнивание

0 голосов
/ 09 апреля 2011

потому что .field имеет позицию relative, и если вы добавите .icon со стилем: position:absolute;top:0px; внутри .field, .icon будет добавлено в '0px' поверх .field не из body

Я не могу объяснить это лучше на английском>. <</strong>, я надеюсь, вы понимаете

...