Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position DIV above Input Box without changing position of Input Box

Tags:

html

css

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;
}
like image 290
RSolberg Avatar asked Jul 20 '09 22:07

RSolberg


People also ask

Can I use Z index without position?

In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don't apply a z-index , the elements will be stacked in the order they are written in the HTML.

Can you put a div in a input?

You can't place any element inside an input. An input does not contain any HTML. Show activity on this post. The way to do that is to put the input and the wanted div inside a wrapper div, which should look like the input - the wanted width, length of the input and should have border.

What is div default position?

position: static; The default position is static for any html element if not specified explicitly.


2 Answers

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;
}
like image 113
Ben Blank Avatar answered Sep 28 '22 01:09

Ben Blank


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).

like image 25
brettkelly Avatar answered Sep 28 '22 01:09

brettkelly