Положение DIV над полем ввода без изменения положения поля ввода

Question

Я хотел бы добавить DIV над полем ввода (текстовым полем), не изменяя отображаемую позицию текстового поля. Этот DIV будет показан / скрыт, когда текстовое поле имеет фокус или нет ... Как правильно форматировать CSS для этого DIV, чтобы он отображался прямо над текстовым полем, не вызывая смещение текстового поля вниз?

    <td>
        <div class="someclass">images</div>
        <input type="text" maxlength="2" class="timebox" />
    </td>

EDIT
Я изменил CSS, следуя приведенному ниже решению (из Бен Бланк ), и теперь DIV рендерится в левом верхнем углу экрана, а не в ячейке таблицы ...

.inputbanner
{
    position: absolute;
    display: none;
    width: 30px;
    top: 0;
    left: 0;
}

Answer 1

Вам просто нужно позиционировать <div> абсолютно:

div.someclass {
    position: absolute;
    top: 0;
    left: 0;
}

Абсолютно позиционированные элементы полностью находятся вне «потока» HTML и поэтому не влияют на рендеринг других элементов. Приведенный выше пример помещает <div> в верхний левый угол своего родителя; вы можете переместить его, изменив значения свойств top и left. Отрицательные значения допускаются, если они вам нужны, и вы также можете использовать bottom или left, если хотите. Установка top и bottom, но не height, может использоваться для растяжения вашего <div> по вертикали на основе высоты его родителя (и аналогично для left, right и width).

Родителю <div> необходимо установить «контекст», обычно это делается путем добавления «position: relative», но применять этот стиль к ячейкам таблицы небезопасно. Вместо этого вы должны обернуть содержимое вашей ячейки с внешней <div>:

<td>
    <div class="outerclass">
        <div class="someclass">images</div>
        <input type="text" maxlength="2" class="timebox" />
    </div>
</td>

Затем примените position к этому новому <div>:

div.outerclass {
    position: relative;
}

Answer 2

Вам нужно поместить его в другой div, который position:relative (и именно здесь вы хотите, чтобы этот div появился). Ваш текущий CSS будет позиционировать его на 0 пикселей сверху / слева (это верхний левый угол экрана).