inline-block портит относительное позиционирование
-
21-09-2019 - |
Вопрос
У меня есть следующий код:
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
Второй div не будет помещен в позицию 32 x, если я не удалю дисплей:свойство inline-block, которое мне нужно.Есть ли способ обойти это?
Редактировать:кажется, работает, если я удалю отображение:inline-block, но тогда полосы прокрутки появятся горизонтально (так как div занимает некоторое невидимое пространство).
Решение
Вы должны использовать путь position:absolute
элементы отображаются, когда находятся внутри position:relative
.
Кроме того, чтобы избежать горизонтальной полосы прокрутки, используйте overflow-y
.
Рабочий пример: http://jsbin.com/uveni3
Другие советы
При использовании свойств «inline-block» открывающий тег HTML всегда следует начинать в формате DTD.размещение одного там должно решить эту проблему.