在彼此之間堆疊輸入字段

我有兩個輸入字段（文本框和選擇），我想堆疊在彼此之上。在我的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

在彼此之間堆疊輸入字段

回答

相關問題