inline-block портит относительное позиционирование

StackOverflow https://stackoverflow.com/questions/2080956

  •  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.размещение одного там должно решить эту проблему.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top