javascript - 将输入字段彼此堆叠

我有两个输入字段（一个文本框和一个select），我想相互叠加。在我的js中，我将检查某物的值并将元素样式的设置为隐藏。当我使用以下代码时，select和textbox都完全可见（这是在我将其标记为隐藏之前）。是否可以设置CSS属性，使它们直接位于彼此的顶部，以便在隐藏一个属性时，似乎只有一个。谢谢您的帮助。

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

最佳答案

您正在寻找的是一种堆叠技术。

1）使您的容器div相对定位：
#agencyAccountDropDownDiv{position:relative;}

因此，包含div的停留位置绝对根据其容器定位。

2）接下来，将包含div的输入都设置为绝对位置：

#agencyAccountDropDownDiv, #agencyAccountInputDiv{position:absolute;}

上面的意思是浏览器将把div像一堆纸牌一样堆叠起来。

3）使用JavaScript隐藏并显示您想要的div。

var div1 = document.getElementById('agencyAccountDropDownDiv');

var div2 = document.getElementById('agencyAccountInputDiv');

div1.style.display = 'block';

div2.style.display = 'none';

或g.d.d.c提到的jquery：

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

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