Position DIV above Input Box without changing position of Input Box
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;
}
You need to place it inside another div that's position:relative
(and that is where you want this div to appear). Your current CSS will position it 0px from the top/left (which is the top left corner of the screen).