Почему прыгает элемент при показе изображения рядом с ним?

Question

[Александр Виткалов]

Приветствую.

Есть примерно такой код:

<p><label><input type='checkbox' value='1'> <b>Нажми меня</b></label> <img src="http://site/img/loader.gif" atr="..." style="position: relative; top: 5px; display: none"></p>

Когда я скриптом показываю изображение загрузки (loader), то checkbox прыгает на пару пикселей вниз. Когда скрываю изображение, то checkbox возвращается обратно.
Что нужно изменить, чтобы подобное не происходило? Чтобы checkbox оставался на месте.

Спасибо.

Answer 1

[Максим]

img у вас position:relative; это не верно ,у вас обёртка должна быть relative т.е в вашем случае тег <p></p> а изображение должно быть так же в контейнере хоть в <div></div> что ни есть хорошо внутрь параграфа заталкивать блок,потому пересмотрите вёрстку

Comments

[Александр Виткалов]

Так а решение то какое? Использовать таблицы, плавающие контейнеры, относительное позиционирование??

[Максим]

Александр Виткалов: на табличках не пробовал я , на позиционировании самый раз - или вы не умеете ?

[Максим]

Александр Виткалов: codepen.io/Geyan/pen/yaQdPv?editors=110 примерно набросал не зная саму идею , так надо ?

[Александр Виткалов]

Максим Жаров: похоже рабочий вариант.

[Максим]

Александр Виткалов: рад что помог