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

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

ただいまの
回答率

88.80%

要素が被ってしまい、隠れてしまっている状態にいます。

解決済

回答 1

投稿 編集

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

avicii

score 39

今現在、ボタンにカーソルを置くと、メニューが表示されるようにしています。しかし、そのメニューが真下にいかないで、要素が被ってしまい、ずれてしまっている状態になっています。もしわかるかたがいらしたら、教えていただきたいです。

イメージ説明

app/assets/stylesheets/style.scss

.photo {
  padding: 0;
}
.head-container {
  background-color: white;
}
.headed {
  list-style: none;
  display: flex;
  height: 75px;
}

.headed li {
  width: 150px;
  text-align: right;
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  margin-top: 0.8%;
  margin-bottom: 1%;
  color: $accent;
}

li.left {
  width: 400px;
  font-size: 34px;
  margin-left: 3.5%;
  margin-right: 5%;
  color: $accent;
  font-weight: bold;
}

li.first {
  width: 630px;
}

/* Chance to Chance */
a.home {
  color: $accent;
}

/* logout */

a.logout {

  display: inline-block;
  color: $accent;
  margin-top: 3.0px;
  margin-right: 10.0px;
  padding-right: 5.0px;
  text-decoration: none;
  border-radius: 3px;
  transition: .4s;
}

/* */

/* guider */
.guider_nav {

    height: 100px;
    width: 400px;
    margin-left: 500px;
    position: relative;
    right: 0;
    span {
      top: 5px;
      display: block;
      float: left;
      margin-left: 0px;
      margin-top: 11px;
      width: 100px;
      height: 50px;
      font-size: 25px;
      cursor: pointer;
      position: absolute;
      color: $accent;
      left: 48px;
      &:after {
        content: '▼';
        font-size: .7em;
        margin-left: -4px;
      }
      &:hover ul {
        color: $accent;
        display: block;
      }
    }
    ul {
      display: none;
      position: absolute;
      top: 46px;
      right: 0;
      border-left: 1px solid #d8d8d8;
      border-right: 1px solid #d8d8d8;
      box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
      li {
        background-color: #f0f0f0;
        a {
          display: block;
          padding: 10px 20px;
          text-align: left;
          border-bottom: 1px solid #d8d8d8;
        }
      }
     }
  }

  li.category {
    font-size: 19px;
    width: 150px;
    background-color: white;
    height: 214px;
    text-align: center;   
    left: 5px;
  }
  a.guider-category {
    color: $accent;   
  }
  a.plan {
  font-size: 25px;
  color: $accent;
  display: inline-block;
  padding: 0.1em 0.8em 0.1em 1em;
  text-decoration: none;
  border: solid 2px white;
  border-radius: 3px;
  transition: .4s;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}
  a.plan:hover {
  background: #67c5ff;
  color: white;
}

app/assets/style.scss

div.contents.row {
  h2 {

    @include boxBase(20px 0, 0);
    font-weight: normal;
    strong {
      font-weight: bold;
      padding-right: 5px;
      font-size: 1.2em;
    }
  }

  div.avicii {
      top: 12%;
      bottom: 0;
      right: 0;
      font-size: 15px;
      padding: 0 auto;

  }
  div.martin.garrix {
      top: 12%;
      bottom: 0;
      right: 0;
      font-size: 15px;
      padding: 0 auto;
      .clear {
        clear: left;
      }
  }

  .new_user{
  font-family: "游ゴシック", "YuGothic";
  }

  div.content_post, .edm_post {
    @include boxBase(20px 0 ,30px);

    position: relative;
    height: 400px;
    color: #fff;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba($black,0.2);
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include filter-gradient(#000000, #a60000, vertical);
      @include background-image(linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,0.85) 100%));
      z-index: 1;
      border-radius: 3px;
    } 
    .more {
      position: absolute;
      cursor: pointer;
      top: 20px;
      right: 30px;
      z-index: 2;
      height: 100px;
      width: 80px;
      text-align: right;
      &:hover ul.more_list {
        display: block;
      }
      ul.more_list {
        position: absolute;
        text-align: left;
        width: 80px;
        right: 0;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid #ddd;
        display: none;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        border-radius: 3px;
        li {
          border-bottom: 1px solid #ddd;
          &:last-child {
            border-bottom: 0;
          }
          a {
            display: block;
            padding: 5px;
            &:hover {
              background-color: $accent;
              color: #fff;
            }
          }
        }
      }
    }


app/views/layout/application.html.erb

<body class="photo">
    <header>
     <div>
      <div class="head-container">
       <nav class="headed">
         <li class="left"><a class="home" href="/plans">Chance to Chance</a></li>

        <% if guider_signed_in? %>
          <div class="guider_nav">
            <span><%= current_guider.nickname %>
              <ul>
                  <li class="category">
                    <a class="guider-category", href="/guiders/<%= current_guider.id %>">マイページ</a>
                    <a class="guider-category", href="/guiders/<%= current_guider.id %>/go">プロブレム</a>
                    <%= link_to "ログアウト", destroy_guider_session_path, method: :delete, class: 'guider-category' %>
                  </li>
              </ul>
            </span>
            <a class="plan" href="/plans/new">プラン</a>
          </div>

        <% end %>

        <% if tourist_signed_in? %>
             <li class="first">
                <%= link_to "Logout", destroy_tourist_session_path, method: :delete, class: 'logout' %>
              </li>
              <li class="second">
                <a class='post' href="/tourists/show">Contact</a>
              </li>
        <% end %>

        <% if ! (guider_signed_in? or tourist_signed_in?) %>


             <li class="first"><%= link_to "traveller", new_tourist_session_path, class: 'post' 
            %></li>
             <li class="second"><%= link_to "guider", new_guider_session_path, class: 'post' %> 
            </li>         
        <% end %>
       </nav>
       <hr class="bar">
      </div>
     </div>
    </header>

app/view/plans/index.html.erb

<div class="contents row">
   <% @plans.each do |plan| %>
    <div class="content_post" style="background-image: url(<%= plan.image %>);">
        <div class="more">
          <span><%= image_tag 'arrow_top.png' %></span>
           <ul class="more_list">
            <li>
              <%= link_to 'detail', "/plans/#{plan.id}", method: :get %>
            </li>
            <% if guider_signed_in? && current_guider.id == plan.guider_id %>
             <li>
               <%= link_to '編集', "/plans/#{plan.id}/edit", method: :get %>
             </li>
             <li>
               <%= link_to '削除', "/plans/#{plan.id}", method: :delete %>
             </li>
            <% end %>
           </ul>
        </div>
        <%= simple_format(plan.title) %>
      <span class="name">
        <a href="/guiders/<%= plan.guider_id %>">
          <span>guider</span><%= plan.guider.nickname %>
        </a>
      </span>
    </div>
   <% end %>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mepon

    2019/05/22 21:09

    フレームワークを使われているのであればタグに追加しましょう

    キャンセル

  • avicii

    2019/05/22 21:12

    ありがとうございます。追加します。

    キャンセル

回答 1

checkベストアンサー

0

.guider_navの要素にz-index: 2;を追加する。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/23 20:42

    ありがとうございます。解決することができました。

    キャンセル

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

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

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