Позиция ДИВ ниже другого

Question

Я пытаюсь реализовать div слой, как показано на рисунке:

Когда пользователь нажимает на кнопку List сайта, я хочу div появляться над формой , До сих пор я использовал функцию переключения из jQuery, чтобы скрыть и показать div (не уверен, что это лучший способ). Мне нужна помощь в позиционировании div, как показано на рисунке. Как я могу это достичь?
Также, когда пользователь выбирает конкретный сайт, я хочу, чтобы он загружал информацию этого конкретного сайта в форму ниже. Это возможно, и если да, то как?

Answer 1

Вы должны использовать position: absolute на столе себя и сделайте следующее:

1) к центру стола по вертикали, вы должны определить высоту. 2) таблица должна быть дочерью #site-level-ext-lighting-form, поэтому вам нужно немного изменить html. 3) вы должны указать position: relative на родительский элемент.

#my-sites-select-layer{ 
    width:900px; 
    height: 250px; 
    background: white; 
    border: 1px solid black; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    overflow: hidden; 
} 

Я изменил ваш fiddle.

Answer 2

вы должны использовать position: absolute Пожалуйста, перейдите по этой ссылке CSS Layout - The position Property, чтобы узнать больше о позициях

Answer 3

Как я понимаю ваш вопрос заключается в том, чтобы расположить эту таблицу как изображение вы предоставили.

Я исправил <select> с, большинство из них было одинаково id: exterior-location. Ни при каких обстоятельствах вы никогда не должны иметь более одного id на той же странице, имеющей одинаковое значение, id s должно быть уникальным.

<form> обернут вокруг всего.

DEMO

Соответствующий CSS

@charset "utf-8"; 

/* Core CSS */ 

html { 
    box-sizing: border-box; 
    font: 400 16px/1.45 Verdana; 
} 

*, 
*:before, 
*:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: none; 
} 

body { 
    background: #EDF; 
    color: #221; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
} 

/* modal */ 

#my-sites-select-layer { 
    position: absolute; 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    height: auto; 
    top: 75px; 
    left: 20px; 
    z-index: 4444; 
    background-color: hsla(0, 0%, 80%, 1); 
    padding: 22px 40px 50px 0; 
} 

#site-select-table { 
    padding-right: 20px; 
}