質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 721

score 24

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

  <div class="main1-2">
      <div class="main1-1">
        <div class="main1-3">
          <h1>空き部屋で世界をつなごう</h1>

          <!-- 収入計算ボタン -->
          <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>

        </div>
      </div>
    </div>
.main1-2 {
  position:relative;
  width: 1600px;
  height: 600px;
  overflow:hidden;
  margin: 0 auto;
  z-index: -1;
}

.main1-1 {
  background-image:url("../img2/fe406606-ff51-4b7f-8095-16f2c720bb03.jpg");
  position:absolute;
  top: 84px;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-repeat: no-repeat; */
  background-size: cover;

}

.main1-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  border-radius: 10px;
  color: #333333;
  font-weight:bold;
  padding: 20px 40px;
}

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

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

>x_xさん
以下bodyのコードになります

<body>
    <header class="border-bottom header">
      <!-- icon -->
      <div class="icon">
        <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>
      </div>

      <!-- menu -->
      <ul>
        <li class="each-menu">基本情報</li>
        <li class="each-menu">準備</li>
        <li class="each-menu">安全対策</li>
        <li class="each-menu">マネープラン</li>
      </ul>

      <!-- 予想月収 -->
      <div class="infered-money">
        <div class="row-major font-bnb-color font-bnb-size">
          予想月収
        </div>
        <div class="row-major">
          <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>
        </div>
        <div class="row-major font">
          <h4 class="font-weight-bold font-bnb-color">$1,103</h4>
        </div>
        <div class="row-major">
          <button type="button" class="btn btn-danger start">はじめる</button>
        </div>
      </div>
    </header>

    <!-- main -->
    <!-- main1 -->
    <!-- mainは画像と下の文章でワンセット-->
    <div class="main1-2">
      <div class="main1-1">
        <div class="main1-3">
          <h1 style="font-weight:bold;" class="mb-4">空き部屋で世界をつなごう</h1>

          <!-- 収入計算ボタン -->
          <div class="form-group">
            <label for="exampleInputPassword1" class="font-bnb-color">どれくらい収入が見込めるかチェック</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="東京">
          </div>

          <!-- 収入計算条件フォーム -->
          <div class="two-forms">
            <select class="custom-select" style="width:182px; box-sizing:content-box; margin-right:15px;">
              <option value="1">まるまる貸切</option>
              <option value="2">個室</option>
              <option value="3">シェアルーム</option>
            </select>

            <select class="custom-select" style="width:154px; box-sizing:content-box;">
              <option value="1">ゲスト1人</option>
              <option value="2">ゲスト2人</option>
              <option value="3">ゲスト3人</option>
              <option value="4" selected>ゲスト4人</option>
              <option value="5">ゲスト5人</option>
              <option value="6">ゲスト6人</option>
              <option value="7">ゲスト7人</option>
              <option value="8">ゲスト8人</option>
              <option value="9">ゲスト9人</option>
              <option value="10">ゲスト10人</option>
              <option value="11">ゲスト11人</option>
              <option value="12">ゲスト12人</option>
              <option value="13">ゲスト13人</option>
              <option value="14">ゲスト14人</option>
              <option value="15">ゲスト15人</option>
              <option value="16">ゲスト16人</option>
            </select>
          </div>

          <!-- 収入計算結果 -->
          <div class="row-major">
            <h2 class="font-weight-bold my-4">$1,103</h2>
          </div>
          <div class="row-major" style="color:#484848;">
            月あたり
          </div>
          <div class="row-major">
            <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>
          </div>

          <button type="button" class="btn btn-bnb">はじめる</button>

        </div>
      </div>
    </div>
</body>
/* よく使うスタイル */
.row-major {
  display: inline-block;
}

.font-bnb-color {
  color: #484848;
}

.font-bnb-size {
  font-size: 14px;
}



/* header */

.header {
  display: flex;
  flex-direction:row;
  position: fixed;
  width: 100%;
  background: white;
}

/* icon */
.icon {
  padding: 25px;
  margin-left: 50px;
}


/* menu */
header ul {
  list-style: none;
  color: #484848;
  font-weight: bold;
  font-size: 14px;
  padding: 0;
  margin: auto 0;
}

.each-menu {
  padding: 0 13px;
  display: inline-block;
}

.infered-money {
  margin:auto 90px auto auto;
}

/* button */
.start {
  font-size: 14px;
  font-weight: bold!important;
  margin-left: 15px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yuta_kg

    2019/04/17 13:18 編集

    >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 13:19

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

    キャンセル

  • yuta_kg

    2019/04/17 13:27

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

    キャンセル

回答 1

checkベストアンサー

+1

z-index: -1; の指定はなくしてください。body の下に行っているため触れなくなっています。
header の上になるのが気になるのであれば、header の z-index 値を上げます。

header {
  z-index: 10;
}


https://app.codegrid.net/entry/z-index-1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/17 14:48

    指摘の通り、headerのz-index値を上げたら改善できました!
    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る