CSS: отображение: встроенный блок и позиционирование: абсолютный

Ответ 1

Когда вы используете position:absolute;, элемент извлекается из обычного потока страниц. Поэтому он больше не влияет на расположение его элемента контейнера. Таким образом, элемент контейнера не учитывает его высоту, поэтому, если нет ничего, чтобы установить высоту, тогда контейнер будет иметь нулевую высоту.

Кроме того, установка display:inline-block; не имеет никакого смысла для элемента position:absolute;. Опять же, это потому, что абсолютное позиционирование выводит элемент из потока страниц. Это противоречит inline-block, который существует только для того, чтобы повлиять на то, как элемент вписывается в поток страниц. Все элементы position:absolute; автоматически обрабатываются как display:block, так как это единственный режим логического отображения для абсолютного позиционирования.

Если вам требуется абсолютное позиционирование, единственным решением проблемы с высотой является установка высоты контейнера.

Однако, я подозреваю, что вы могли обойтись без абсолютного позиционирования.

Похоже, то, что вы пытаетесь сделать, это установить второй <span> в каждом блоке на фиксированную позицию в блоке, чтобы они выстроились в линию.

Это классическая проблема CSS. В "плохих старых днях" веб-дизайнеры сделали бы это, используя таблицу с фиксированной шириной на ячейках таблицы. Это, очевидно, не является ответом для веб-дизайнеров сегодня, но это вызывает много вопросов.

Существует несколько способов сделать это с помощью CSS.

Проще всего установить оба элемента <span> на display:inline-block; и дать им как фиксированную ширину.

например:

<div class='section'>
    <span class="element-left">some text</span>
    <span class="element-right">some text</span>
</div>

со следующим CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

[EDIT] после того, как вопрос обновлен

Вот как я мог бы достичь того, что вы сейчас спрашиваете:

<div class='section'>
    <span class="element-left"><span class='indent-0'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-1'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-2'>some text</span></span>
    <span class="element-right">some text</span>
</div>

со следующим CSS:

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

Небольшое количество дополнительной разметки, но оно действительно достигает желаемого эффекта.

Ответ 2

Нет.

Вы можете позиционировать абсолютно то же самое, что и экземпляр элемента внутри поля раздела с visible: none, но абсолютное позиционирование по определению делает его "плавающим" элементом, который не взаимодействует с элементами над ним.

Предполагая, что ваш макет страницы исправлен, вы можете использовать padding-left: #px; для достижения своей цели, поскольку я не думаю, что относительное позиционирование - это то, что вы хотите.

В качестве альтернативы вы можете использовать display: table-*, чтобы заставить его сохранить более строгую форму, не затрагивая структуру документа, как показано здесь

Однако, в зависимости от того, хотите ли вы, чтобы ячейки были текучими, вам может потребоваться изменить div .section на display: table-row, если вам не нравится настройка заданной ширины и хотите, чтобы отдельная секция выстраивалась в линию.

Ответ 3

На самом деле это можно сделать легко и просто с помощью div. Вам просто нужно поместить div с позицией: относительно внутри встроенного или блочного дисплея div. Установите его ширину и высоту так же, как и содержащий div. Затем вы обнаружите, что вы можете позиционировать еще один div внутри него.