Поля ввода стека поверх друг друга

Question

У меня есть два поля ввода (текстовое поле и выберите), которые я бы хотел сложить поверх друг друга. В моем js я проверю значение чего-либо и установлю для стиля элемента значение hidden. Когда я использую следующий код, и select, и текстовое поле полностью видны (это прежде, чем я отмечу один как скрытый). Есть ли свойство 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) Скрыть и показать Div'ы, которые вы хотите, используя JavaScript.

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

Вы можете расположить их в одном и том же месте, используя css следующим образом:

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

Это исправит их относительно окна.Вы захотите взглянуть на DOM Box Model и Absolute vs. Relative Positioning для других подходов.В общем, то, что вы, вероятно, хотите, это то, что будет динамически показывать или скрывать контейнерный div.jQuery сделает это чрезвычайно просто:

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

Когда один или другой отображается или скрыт, он будет удален из потока, что позволит им «занимать одно и то же пространство».

Answer 3

Основная идея:

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

Вероятно, лучшие способы сделать это

Answer 4

Способ сделать это - установить первый (фоновый) элемент как абсолютно позиционированный.Это не даст ему занять место, и сверху появится следующий элемент:

В этом случае это

#agencyAccountDropDownDiv {
    position: absolute;
}

Кстати, вам не нужны divэтот простой пример.Вы можете разместить выбор непосредственно.