Position DIV above Input Box without changing position of Input Box

css, html

Solution

You simply need to position your `<div>` absolutely:

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

Absolutely positioned elements are entirely outside the "flow" of HTML and so do not affect the rendering of other elements. The example above places the `<div>` at the top-left corner of its parent; you can move it by changing the values of the `top` and `left` properties. Negative values are allowed, if you need them, and you can also use `bottom` or `left` if you prefer. Setting both `top` and `bottom` but not a `height` can be used to stretch your `<div>` vertically based on the height of its parent (and similarly for `left`, `right`, and `width`).

The `<div>`'s parent needs to establish "context", usually done by adding "`position: relative`", but it isn't safe to apply that style to table cells. Instead, you should wrap the contents of your cell with an outer `<div>`:

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

Then apply `position` to that new `<div>`:

div.outerclass {
    position: relative;
}

Problem

I'd like to add a DIV above an input box (textbox) without changing the rendered position of the textbox. This DIV will be shown/hid when the textbox has focus or not... What is the proper CSS formatting for this DIV to show directly above the textbox without causing the textbox to shift down? ``` <td> <div class="someclass">images</div> <input type="text" maxlength="2" class="timebox" /> </td> ``` EDIT I modified the CSS to follow the solution below (from Ben Blank) and the DIV is now rendering in the top left of the screen and not the table cell... ``` .inputbanner { position: absolute; display: none; width: 30px; top: 0; left: 0; } ```

Original source