在彼此之间堆叠输入字段

我有两个输入字段（文本框和选择），我想堆叠在彼此之上。在我的JS中，我将检查某些东西的值，并将元素样式设置为隐藏。当我使用下面的代码时，select和textbox都是完全可见的（这是在我将其标记为隐藏之前）。是否有一个CSS属性可以让我们直接在彼此之上进行设置，这样当一个人被隐藏时，似乎只有一个人在那里。谢谢您的帮助。在彼此之间堆叠输入字段

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

来源

2010-08-10 Isaac Levin

– 2010-08-10 17:05:23

要做到这一点的方法是将第一个（背景）元素设置为绝对定位。这将阻止它占用空间，并且以下元素将出现在它上面。

在这种情况下，它是

#agencyAccountDropDownDiv { 
    position: absolute; 
}

BTW你不需要的div这个简单的例子。您可以直接定位选择。

来源

2010-08-10 17:09:41 Jhong

您可以在同一个地方使用CSS像这个位置他们：

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

那将解决这些问题相对于窗口。您需要查看DOM盒模型和其他方法的绝对与相对定位。一般来说，你可能想要的是可以动态显示或隐藏容器div的东西。 jQuery的会做出非常容易：

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

当一个或另一个显示或隐藏它会从流中移除，让他们都来“占用相同的空间”。

来源

2010-08-10 17:10:29

的基本思想：

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

可能会更好做

来源

2010-08-10 17:22:06 epascarello

你想找的是一个堆叠技术的方式。

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

这是为了让包含分区的费用绝对定位成根据它们的容器。

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.Ç所提到的，与jquery：

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

来源

2010-08-11 10:42:34 hitautodestruct

在彼此之间堆叠输入字段

回答

相关问题