ドロップダウン型ボタン、入力フォームが動作しない

Airbnbのサイト模写をしてます。
以下のようなコードで、ドロップダウン型ボタン、入力フォームを実装しました。
main1-2の外に出すと、ボタン、フォーム共に動作するのですが、main1-2の内部では動作しません。
ボタン、フォーム共にBootstrapで実装しました。
なぜでしょうか？

html
1　　<div class="main1-2">
2      <div class="main1-1">
3        <div class="main1-3">
4          <h1>空き部屋で世界をつなごう</h1>
5
6          <!-- 収入計算ボタン -->
7          <div class="form-group">
8            <label for="exampleInputPassword1">どれくらい収入が見込めるかチェック</label>
9            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="東京">
10          </div>
11
12          <!-- 収入計算条件ボタン -->
13          <div class="two-btn">
14            <div class="btn-group">
15              <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
16                Action
17              </button>
18              <div class="dropdown-menu">
19                <a class="dropdown-item" href="#">Action</a>
20                <a class="dropdown-item" href="#">Another action</a>
21                <a class="dropdown-item" href="#">Something else here</a>
22                <div class="dropdown-divider"></div>
23                <a class="dropdown-item" href="#">Separated link</a>
24              </div>
25            </div>
26          </div>
27
28        </div>
29      </div>
30    </div>

CSS
1.main1-2 {
2  position:relative;
3  width: 1600px;
4  height: 600px;
5  overflow:hidden;
6  margin: 0 auto;
7  z-index: -1;
8}
9
10.main1-1 {
11  background-image:url("../img2/fe406606-ff51-4b7f-8095-16f2c720bb03.jpg");
12  position:absolute;
13  top: 84px;
14  right: 0;
15  bottom: 0;
16  left: 0;
17  /* background-repeat: no-repeat; */
18  background-size: cover;
19
20}
21
22.main1-3 {
23  position: absolute;
24  top: 50%;
25  left: 50%;
26  background-color: white;
27  border-radius: 10px;
28  color: #333333;
29  font-weight:bold;
30  padding: 20px 40px;
31}

追記

mts10806さん

以下が動作するコードです。
div class="main1-2"の外に出せば動作します。

html
1<div class="main1-2">
2      <div class="main1-1">
3        <div class="main1-3">
4          <h1>空き部屋で世界をつなごう</h1>
5
6
7
8        </div>
9      </div>
10    </div>
11
12    <!-- 収入計算ボタン -->
13    <div class="form-group">
14      <label for="exampleInputPassword1">どれくらい収入が見込めるかチェック</label>
15      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="東京">
16    </div>
17
18    <!-- 収入計算条件ボタン -->
19    <div class="two-btn">
20      <div class="btn-group">
21        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
22          Action
23        </button>
24        <div class="dropdown-menu">
25          <a class="dropdown-item" href="#">Action</a>
26          <a class="dropdown-item" href="#">Another action</a>
27          <a class="dropdown-item" href="#">Something else here</a>
28          <div class="dropdown-divider"></div>
29          <a class="dropdown-item" href="#">Separated link</a>
30        </div>
31      </div>
32    </div>

x_xさん

以下bodyのコードになります

html
1<body>
2    <header class="border-bottom header">
3      <!-- icon -->
4      <div class="icon">
5        <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height:32px;width:32px;fill:#008489"><path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path></svg>
6      </div>
7
8      <!-- menu -->
9      <ul>
10        <li class="each-menu">基本情報</li>
11        <li class="each-menu">準備</li>
12        <li class="each-menu">安全対策</li>
13        <li class="each-menu">マネープラン</li>
14      </ul>
15
16      <!-- 予想月収 -->
17      <div class="infered-money">
18        <div class="row-major font-bnb-color font-bnb-size">
19          予想月収
20        </div>
21        <div class="row-major">
22          <svg viewBox="0 0 24 24" role="img" aria-label="詳細はこちら" focusable="false" style="height:11px;width:11px;display:block;fill:#484848"><path d="m12 0c-6.63 0-12 5.37-12 12s5.37 12 12 12 12-5.37 12-12-5.37-12-12-12zm0 23c-6.07 0-11-4.92-11-11s4.93-11 11-11 11 4.93 11 11-4.93 11-11 11zm4.75-14c0 1.8-.82 2.93-2.35 3.89-.23.14-1 .59-1.14.67-.4.25-.51.38-.51.44v2a .75.75 0 0 1 -1.5 0v-2c0-.74.42-1.22 1.22-1.72.17-.11.94-.55 1.14-.67 1.13-.71 1.64-1.41 1.64-2.61a3.25 3.25 0 0 0 -6.5 0 .75.75 0 0 1 -1.5 0 4.75 4.75 0 0 1 9.5 0zm-3.75 10a1 1 0 1 1 -2 0 1 1 0 0 1 2 0z" fill-rule="evenodd"></path></svg>
23        </div>
24        <div class="row-major font">
25          <h4 class="font-weight-bold font-bnb-color">$1,103</h4>
26        </div>
27        <div class="row-major">
28          <button type="button" class="btn btn-danger start">はじめる</button>
29        </div>
30      </div>
31    </header>
32
33    <!-- main -->
34    <!-- main1 -->
35    <!-- mainは画像と下の文章でワンセット-->
36    <div class="main1-2">
37      <div class="main1-1">
38        <div class="main1-3">
39          <h1 style="font-weight:bold;" class="mb-4">空き部屋で世界をつなごう</h1>
40
41          <!-- 収入計算ボタン -->
42          <div class="form-group">
43            <label for="exampleInputPassword1" class="font-bnb-color">どれくらい収入が見込めるかチェック</label>
44            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="東京">
45          </div>
46
47          <!-- 収入計算条件フォーム -->
48          <div class="two-forms">
49            <select class="custom-select" style="width:182px; box-sizing:content-box; margin-right:15px;">
50              <option value="1">まるまる貸切</option>
51              <option value="2">個室</option>
52              <option value="3">シェアルーム</option>
53            </select>
54
55            <select class="custom-select" style="width:154px; box-sizing:content-box;">
56              <option value="1">ゲスト1人</option>
57              <option value="2">ゲスト2人</option>
58              <option value="3">ゲスト3人</option>
59              <option value="4" selected>ゲスト4人</option>
60              <option value="5">ゲスト5人</option>
61              <option value="6">ゲスト6人</option>
62              <option value="7">ゲスト7人</option>
63              <option value="8">ゲスト8人</option>
64              <option value="9">ゲスト9人</option>
65              <option value="10">ゲスト10人</option>
66              <option value="11">ゲスト11人</option>
67              <option value="12">ゲスト12人</option>
68              <option value="13">ゲスト13人</option>
69              <option value="14">ゲスト14人</option>
70              <option value="15">ゲスト15人</option>
71              <option value="16">ゲスト16人</option>
72            </select>
73          </div>
74
75          <!-- 収入計算結果 -->
76          <div class="row-major">
77            <h2 class="font-weight-bold my-4">$1,103</h2>
78          </div>
79          <div class="row-major" style="color:#484848;">
80            月あたり
81          </div>
82          <div class="row-major">
83            <svg viewBox="0 0 24 24" role="img" aria-label="詳細はこちら" focusable="false" style="height:11px;width:11px;display:block;fill:#484848"><path d="m12 0c-6.63 0-12 5.37-12 12s5.37 12 12 12 12-5.37 12-12-5.37-12-12-12zm0 23c-6.07 0-11-4.92-11-11s4.93-11 11-11 11 4.93 11 11-4.93 11-11 11zm4.75-14c0 1.8-.82 2.93-2.35 3.89-.23.14-1 .59-1.14.67-.4.25-.51.38-.51.44v2a .75.75 0 0 1 -1.5 0v-2c0-.74.42-1.22 1.22-1.72.17-.11.94-.55 1.14-.67 1.13-.71 1.64-1.41 1.64-2.61a3.25 3.25 0 0 0 -6.5 0 .75.75 0 0 1 -1.5 0 4.75 4.75 0 0 1 9.5 0zm-3.75 10a1 1 0 1 1 -2 0 1 1 0 0 1 2 0z" fill-rule="evenodd"></path></svg>
84          </div>
85
86          <button type="button" class="btn btn-bnb">はじめる</button>
87
88        </div>
89      </div>
90    </div>
91</body>

css
1/* よく使うスタイル */
2.row-major {
3  display: inline-block;
4}
5
6.font-bnb-color {
7  color: #484848;
8}
9
10.font-bnb-size {
11  font-size: 14px;
12}
13
14
15
16/* header */
17
18.header {
19  display: flex;
20  flex-direction:row;
21  position: fixed;
22  width: 100%;
23  background: white;
24}
25
26/* icon */
27.icon {
28  padding: 25px;
29  margin-left: 50px;
30}
31
32
33/* menu */
34header ul {
35  list-style: none;
36  color: #484848;
37  font-weight: bold;
38  font-size: 14px;
39  padding: 0;
40  margin: auto 0;
41}
42
43.each-menu {
44  padding: 0 13px;
45  display: inline-block;
46}
47
48.infered-money {
49  margin:auto 90px auto auto;
50}
51
52/* button */
53.start {
54  font-size: 14px;
55  font-weight: bold!important;
56  margin-left: 15px;
57}
58

m.ts10806

2019/04/17 02:30 編集

Bootstrapのバージョンと「動作する」ほうのコードもご提示ください

x_x

2019/04/17 03:09

z-index: -1;の意図が分からないのでbodyから書いてください

Lhankor_Mhy

2019/04/17 03:09

「動作する」とは具体的にはどういうことでしょうか？　ご提示のコードだけですと送信はできないかと思いますが。「動作しません」とは具体的にはどのような問題が起きていますか？

yuta_kg

2019/04/17 04:17 編集

>mts10806さん Bootstrapのバージョンは4.3.1です。コードを次のコメントで載せます。 >x_xさんコードを次のコメントで載せます。 z-indexの意図は、ヘッダーメニューを固定し常に一番上に表示させたいからです。 >Lhankor_Mhyさん曖昧な言葉を使ってすみません「動作する」とは、ドロップダウン型ボタンを選択できないこと、入力フォームに入力できないこと、を示しています。まだ送信できなくて大丈夫です。

yuta_kg

2019/04/17 04:19 編集

>mts10806さん動作するコードは以下の通りです。 ```html <div class="main1-2"> <div class="main1-1"> <div class="main1-3"> <h1>空き部屋で世界をつなごう</h1> </div> </div> </div>  <div class="form-group"> <label for="exampleInputPassword1">どれくらい収入が見込めるかチェック</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="東京"> </div>  <div class="two-btn"> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> ```

m.ts10806

2019/04/17 04:19

質問は編集できますので適宜加筆修正いただければと

yuta_kg

2019/04/17 04:27

わかりました！質問に加筆します！