Stack Input fields on top of eachother

Question

I have two input fields (a textbox and select) that I would like to get stacked on top of eachother. In my js, I will check the value of something and set on the of the elements style to hidden. When I use the following code, the select and textbox are both completely visible (this is before I mark one as hidden). Is there a CSS property that I can set to make them be directly on top of eachother, so that when one is hidden, it seems like only one is there. Thanks for the help.

<div>
   <div id="agencyAccountDropDownDiv">
     <select id="AgencyAccountSelect">
     </select>
    </div>
    <div id="agencyAccountInputDiv">
     <input id="Text1" type="text" />
    </div>
</div>

Answer 1

The way to do it is set the first (background) element to be absolutely positioned. This will stop it from taking up space, and the following element will appear on top of it.

In this case, it is

#agencyAccountDropDownDiv {
    position: absolute;
}

BTW you don't need the divs for this simple example. You could position the select directly.

Answer 2

You can position them in the same place using css like this:

#agencyAccountDropDownDiv, #agencyAccountInputDiv { position: fixed; top: 10; left: 10; }

That's going to fix them relative to the window. You'll want to look into the DOM Box Model and Absolute vs. Relative Positioning for other approaches. Generally though, what you probably want is something that will Show or Hide the container div dynamically. jQuery would make that extremely easy:

$('#agencyAccountDropDownDiv').show()
$('#agencyAccountDropDownDiv').hide()

When one or the other is shown or hidden it will be removed from the flow, allowing both of them to 'take up the same space'.

Answer 3

The basic idea:

<div style="position:relative">
    <select style="width:150px" onchange="document.getElementById('aaa').value = this.options[this.selectedIndex].text">
        <option>hey hey hey hey 1</option>
        <option>hey hey hey hey 2</option>
        <option>hey hey hey hey 3</option>
    </select>
    <input id="aaa" type="text" style="position:absolute;left:0px;width:132px;border-right:0px;">
</div>

Probably better ways of doing it

Answer 4

What your looking for is a stacking technique.

1) Make your container div relatively positioned: #agencyAccountDropDownDiv{position:relative;}

This is so the containing div's stay positioned absolutely according to their container.

2) Next give both your input containing div's a position of absolute:

#agencyAccountDropDownDiv, #agencyAccountInputDiv{position:absolute;}

The above means that the browser will stack the div's like a pile of cards.

3) Hide and show the div's you want using javascript.

var div1 = document.getElementById('agencyAccountDropDownDiv');
var div2 = document.getElementById('agencyAccountInputDiv');
div1.style.display = 'block';
div2.style.display = 'none';

Or as g.d.d.c mentioned, with jquery:

$("#agencyAccountDropDownDiv").show();
$("#agencyAccountInputDiv").hide();