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

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

ただいまの
回答率

88.92%

【CSS】要素が被ってしまう

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 14K+
退会済みユーザー

退会済みユーザー

いつもお世話になっております。

前提・発生している問題

以下のようなポートフォリオサイトをRailsで作っているのですが、
背景が白い要素の下にリンク付きのアイコンを並べたいと思っています。
しかし、実際には画像のように、白の要素の下にアイコンが隠れてしまいます。
イメージ説明

該当のソースコード

<!-- application.html -->

<!DOCTYPE html>
<html>
<head>
  <title>tsumi's Portfolio</title>
  <%= csrf_meta_tags %>

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <%= stylesheet_link_tag    'application', media: 'all'%>
  <%= javascript_include_tag 'application' %>
</head>

<body>
  <header>
    <nav class="navbar navbar-header">
      <ul class="head_nav navbar-nav navbar-right">
        <li><a href="<%= root_path %>">Top</a></li>
        <li><a href="<%= love_path %>">Love</a></li>
        <li><a href="<%= product_path %>">Products</a></li>
        <li><a href="<%= activity_path %>">Activies</a></li>
        <li><a href="http://tmicha.hateblo.jp/" target="_blank">Blog</a></li>
      </ul>
    </nav>
  </header>

  <%= yield %>
</body>
</html>
<!-- index.html -->

<div class="container">
  <div class="row main">
    <div class="main_contents">
      <%= image_tag "cat_icon.jpg", class: "main_icon", size: "200x200" %>
      <h1>Hello, This page is Tsumi's Portfolio!(`ω´ )</h1>
    </div>
    <div class="about_me">
      <h1>About me</h1>
      <p>いろいろ自己紹介とか</p>
    </div>
    <div class="contents_menu">
      <a href="<%= love_path %>"><%= image_tag "love.png", class: "", size: "200x200" %></a>
      <a href="<%= product_path %>"><%= image_tag "products.png", class: "", size: "200x200" %></a>
      <a href="<%= activity_path %>"><%= image_tag "activities.png", class: "", size: "200x200" %></a>
    </div>
    <div class="clear"></div>
  </div>
</div>
//top.scss
.container, .row {
  width: 100%;
  margin: 0;
  padding:0;
}

.navbar-header {
  position: absolute;
  z-index: 999;
  position: fixed !important; //IE6以下に指定する
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #36465d;
  color: #fff;
  opacity:0.9;

  .head_nav {
    :hover {
      background-color: #BDBDBD;
    }
    li {
      display: inline-block;
      list-style: none;
      padding: 20px 30px;

      a {
        color: #FFF;
        text-decoration: none;
      }
    }
  }
}
.main {
  width: 100%;
  height: 1500px;
  background-size: cover;
  background-image:  url("colour__.png");
  background-attachment: fixed;
  display: block;
  margin: 0 auto;

  h1 {
    text-align: center;
    color: #FFF;
  }
  p {
    text-align: center;
  }
  .main_icon {
    border-radius: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  .main_contents {
    margin: 200px;
  }
}

.about_me {
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: #FFF;
  opacity: 0.9;
  h1 {
    color: #36465d;
  }
}

.contents_menu {
  display: block;
}

補足情報(言語/FW/ツール等のバージョンなど)

Rails5.0.0.1
Bootstrap3.3.7

初歩的な質問で申し訳ないですが、ご教授いただければと思います。
どうぞよろしくお願い致します。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

おそらくこの辺りを確認していただければ、問題解決すると思います。

z-index

z-indexは要素の重なりを指定するプロパティですが、その仕組みを正確に押さえておかないと、思い通りの重なり順になりません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/16 10:24

    とても参考になるサイトをご紹介いただき、ありがとうございます!
    勉強になりますm(_ _)m

    キャンセル

checkベストアンサー

+1

単純に.container内に.rowとして並べたいだけであるなら.about_meからposition: absolute;を取り除くべきです。

position: absolute;としているのには何か理由があるのでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/16 10:27

    position: absoluteを消したらうまく行きました!
    単純に、.about_meが浮いていたからその下に入り込んでしまっていたんですね、、
    ご回答いただき、ありがとうございました!

    キャンセル

+1

cssではz-indexというものを使って要素の上下関係を操作しています。z-index: 1z-index: 2がかぶった場合はz-index: 2の要素のほうが上に書かれます。
なので今回のケースは当該するliタグにz-index: 1000を指定すれば、z-index: 999を指定したヘッダーよりも上に表示されると思います。

ちょっと話はそれますが、ヘッダーをdisplay: absoluteして重ねなければかぶることもないので、ここらへんのことは考えなくていいと思うのですが、何か理由が会ったりするのでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/16 10:25

    ヘッダーは一番上で大丈夫なのですが、紺色のアイコン画像が隠れてしまい、困っていました。
    ご回答いただき、ありがとうございました!

    キャンセル

  • 2017/05/16 23:07

    b

    キャンセル

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

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

関連した質問

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