Question

我有两个输入字段（文本框和选择），我希望在彼此的顶部堆叠。在我的js中，我将检查某些内容的值并设置隐藏的元素样式。当我使用下面的代码时，select和textbox都是完全可见的（这是在我将其标记为隐藏之前）。是否有一个CSS属性，我可以设置，使它们直接在彼此的顶部，所以当一个隐藏时，似乎只有一个存在。谢谢你的帮助。

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

Answer 1

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

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();

Answer 2

这样做的方法是将第一个（背景）元素设置为绝对定位。这将阻止它占用空间，并在其上方显示以下元素。

在这种情况下，它是

#agencyAccountDropDownDiv {
    position: absolute;
}

顺便说一下，这个简单的例子你不需要div。您可以直接定位选择。

Answer 3

你可以使用css将它们放在同一个地方：

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

这将相对于窗口修复它们。您将要查看其他方法的DOM Box模型和绝对与相对定位。一般来说，你可能想要的是动态显示或隐藏容器div的东西。 jQuery会让这非常简单：

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

当显示或隐藏其中一个或另一个时，它将从流中移除，允许它们“占据相同的空间”。

Answer 4

基本理念：

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

可能更好的方法

堆栈输入字段位于彼此之上

4 个答案: