質問編集履歴

4 情報追加

s.k

s.k score 409

2016/11/15 23:37  投稿

z-indexに値を設定しても機能しません。-positionをstatic以外で設定してます-
###前提・実現したいこと
**header**を**position: fixed;**で固定し、**z-index**で上位表示したい。
【構造図】
![イメージ説明](c80a25748e03327e34460761bd6e61ae.png)
理想的な高さの順位
①**header**
②**index-my-information**
【理想図】
![イメージ説明](66cf637923e8b3e14336edfea0de2513.png)
###発生している問題・エラーメッセージ
**div class="heaeder"**の上に###div class="index-my-information"が重なってしまう。
![イメージ説明](2d076a7c97c8425fb3c681f661e2c4ae.png)
###該当のソースコード
【layout/application.html.erb】
【layout/application.html.erb】★修正しました★
```ruby
<head>  
 <title>Workspace</title>  
 <%= stylesheet_link_tag   'application', media: 'all', 'data-turbolinks-track' => true %>  
 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>  
 <%= csrf_meta_tags %>  
</head>  
<body>
 <div class="header">←上位表示されてほしい。
 <div class="header">
  <%= render 'layouts/header' %>
 </div>
 <p class="notice"><%= notice %></p>
 <p class="alert"><%= alert %></p>
<%= yield %>
</body>
</html>  
```
【page/index.html.erb】
```ruby
    <!-- ページ左 -->
    <aside class="index-profile">
       <div class="index-my-information"> ←headerの下に来るようにしたい。
          <!-- ユーザーアイコン・ユーザー名・マイプロフィールリンク・投稿数 -->
          <section class="user_info">
            <%= render 'shared/user_info' %>
          </section>
               <!-- 投稿数 -->
           <div class="user-info-micropost">
               <span><%= link_to "投稿#{pluralize(current_user.microposts.count, "")}", current_user %></span>
           </div>
       </div>
 
```
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
}
    ・
    ・
    ・
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
}
      ・
      ・
      ・
.dropmenu li ul{   ←.headerの子要素?にあたると思います。
 list-style: none;
 position: absolute;
 background: #fdf9fd;
 z-index: 9999;
 top: 100%;
 left: 0;
 margin: 0;
 padding: 0;
}
      ・
      ・
      ・
.index-profile {
 margin-right: 1000px;
}
.index-my-information {
 height: 250px;
 background-color: white;
 margin-top: -50px;
 margin-left: 20px;
 border-radius: 10px;
 position: relative;
 z-index: 1;
}
.user_info {
 position: absolute;
 top: 80px;
 z-index: 2;
}
.user-info-micropost {
 position: absolute;
 top: 180px;
 left: 20px;
 font-size: 30px;
 z-index: 3;
}
```
###試したこと
①**div class="index-my-information"**にz-indexの値を-で設定するとheaderの下に潜り込みますが、リンクが消失してしまいました。
②リンクを機能させる対策として**pointer-events: none;**をcssに書き込みましたがうまく動きませんでした。
###追加
①「**.header**を**body**直下に置く」とはこういうことでしょうか?
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
 }
}
```
試してみましたが、結果は変わらず.headerが.index-my-informationの下に来てしまいました。。。
  • CSS3

    3895 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    7482 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 4

    2638 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1951 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

3 情報追加

s.k

s.k score 409

2016/11/15 23:33  投稿

z-indexに値を設定しても機能しません。-positionをstatic以外で設定してます-
###前提・実現したいこと
**header**を**position: fixed;**で固定し、**z-index**で上位表示したい。
【構造図】
![イメージ説明](c80a25748e03327e34460761bd6e61ae.png)
理想的な高さの順位
①**header**
②**index-my-information**
【理想図】
![イメージ説明](66cf637923e8b3e14336edfea0de2513.png)
###発生している問題・エラーメッセージ
**div class="heaeder"**の上に###div class="index-my-information"が重なってしまう。
![イメージ説明](2d076a7c97c8425fb3c681f661e2c4ae.png)
###該当のソースコード
【layout/application.html.erb】
```ruby
<body>
 <div class="header">←上位表示されてほしい。
  <%= render 'layouts/header' %>
 </div>
 <p class="notice"><%= notice %></p>
 <p class="alert"><%= alert %></p>
<%= yield %>
</body>
```
【page/index.html.erb】
```ruby
    <!-- ページ左 -->
    <aside class="index-profile">
       <div class="index-my-information"> ←headerの下に来るようにしたい。
          <!-- ユーザーアイコン・ユーザー名・マイプロフィールリンク・投稿数 -->
          <section class="user_info">
            <%= render 'shared/user_info' %>
          </section>
               <!-- 投稿数 -->
           <div class="user-info-micropost">
               <span><%= link_to "投稿#{pluralize(current_user.microposts.count, "")}", current_user %></span>
           </div>
       </div>
 
```
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
}
    ・
    ・
    ・
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
}
      ・
      ・
      ・
.dropmenu li ul{
.dropmenu li ul{    ←.headerの子要素?にあたると思います。
 list-style: none;
 position: absolute;
 background: #fdf9fd;
 z-index: 9999;
 top: 100%;
 left: 0;
 margin: 0;
 padding: 0;
}
      ・
      ・
      ・
.index-profile {
 margin-right: 1000px;
}
.index-my-information {
 height: 250px;
 background-color: white;
 margin-top: -50px;
 margin-left: 20px;
 border-radius: 10px;
 position: relative;
 z-index: 1;
}
.user_info {
 position: absolute;
 top: 80px;
 z-index: 2;
}
.user-info-micropost {
 position: absolute;
 top: 180px;
 left: 20px;
 font-size: 30px;
 z-index: 3;
}
```
###試したこと
①**div class="index-my-information"**にz-indexの値を-で設定するとheaderの下に潜り込みますが、リンクが消失してしまいました。
②リンクを機能させる対策として**pointer-events: none;**をcssに書き込みましたがうまく動きませんでした。
###追加
①「**.header**を**body**直下に置く」とはこういうことでしょうか?
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
 }
}
```
試してみましたが、結果は変わらず.headerが.index-my-informationの下に来てしまいました。。。
  • CSS3

    3895 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    7482 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 4

    2638 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1951 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

2 情報追加

s.k

s.k score 409

2016/11/15 23:32  投稿

z-indexに値を設定しても機能しません。-positionをstatic以外で設定してます-
###前提・実現したいこと
**header**を**position: fixed;**で固定し、**z-index**で上位表示したい。
【構造図】
![イメージ説明](c80a25748e03327e34460761bd6e61ae.png)
理想的な高さの順位
①**header**
②**index-my-information**
【理想図】
![イメージ説明](66cf637923e8b3e14336edfea0de2513.png)
###発生している問題・エラーメッセージ
**div class="heaeder"**の上に###div class="index-my-information"が重なってしまう。
![イメージ説明](2d076a7c97c8425fb3c681f661e2c4ae.png)
###該当のソースコード
【layout/application.html.erb】
```ruby
<body>
 <div class="header">←上位表示されてほしい。
  <%= render 'layouts/header' %>
 </div>
 <p class="notice"><%= notice %></p>
 <p class="alert"><%= alert %></p>
<%= yield %>
</body>
```
【page/index.html.erb】
```ruby
    <!-- ページ左 -->
    <aside class="index-profile">
       <div class="index-my-information"> ←headerの下に来るようにしたい。
          <!-- ユーザーアイコン・ユーザー名・マイプロフィールリンク・投稿数 -->
          <section class="user_info">
            <%= render 'shared/user_info' %>
          </section>
               <!-- 投稿数 -->
           <div class="user-info-micropost">
               <span><%= link_to "投稿#{pluralize(current_user.microposts.count, "")}", current_user %></span>
           </div>
       </div>
 
```
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
}
    ・
    ・
    ・
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
}
     ・
      ・
      ・
      ・
.dropmenu li ul{
 list-style: none;
 position: absolute;
 background: #fdf9fd;
 z-index: 9999;
 top: 100%;
 left: 0;
 margin: 0;
 padding: 0;
}
      ・
      ・
      ・
.index-profile {
 margin-right: 1000px;
}
.index-my-information {
 height: 250px;
 background-color: white;
 margin-top: -50px;
 margin-left: 20px;
 border-radius: 10px;
 position: relative;
 z-index: 1;
}
.user_info {
 position: absolute;
 top: 80px;
 z-index: 2;
}
.user-info-micropost {
 position: absolute;
 top: 180px;
 left: 20px;
 font-size: 30px;
 z-index: 3;
}
```
###試したこと
①**div class="index-my-information"**にz-indexの値を-で設定するとheaderの下に潜り込みますが、リンクが消失してしまいました。
②リンクを機能させる対策として**pointer-events: none;**をcssに書き込みましたがうまく動きませんでした。
###追加
①「**.header**を**body**直下に置く」とはこういうことでしょうか?
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
 }
}
```
試してみましたが、結果は変わらず.headerが.index-my-informationの下に来てしまいました。。。
  • CSS3

    3895 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    7482 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 4

    2638 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1951 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 情報追加

s.k

s.k score 409

2016/11/15 23:22  投稿

z-indexに値を設定しても機能しません。-positionをstatic以外で設定してます-
###前提・実現したいこと
**header**を**position: fixed;**で固定し、**z-index**で上位表示したい。
【構造図】
![イメージ説明](c80a25748e03327e34460761bd6e61ae.png)
理想的な高さの順位
①**header**
②**index-my-information**
【理想図】
![イメージ説明](66cf637923e8b3e14336edfea0de2513.png)
###発生している問題・エラーメッセージ
**div class="heaeder"**の上に###div class="index-my-information"が重なってしまう。
![イメージ説明](2d076a7c97c8425fb3c681f661e2c4ae.png)
###該当のソースコード
【layout/application.html.erb】
```ruby
<body>
 <div class="header">←上位表示されてほしい。
  <%= render 'layouts/header' %>
 </div>
 <p class="notice"><%= notice %></p>
 <p class="alert"><%= alert %></p>
<%= yield %>
</body>
```
【page/index.html.erb】
```ruby
    <!-- ページ左 -->
    <aside class="index-profile">
       <div class="index-my-information"> ←headerの下に来るようにしたい。
          <!-- ユーザーアイコン・ユーザー名・マイプロフィールリンク・投稿数 -->
          <section class="user_info">
            <%= render 'shared/user_info' %>
          </section>
               <!-- 投稿数 -->
           <div class="user-info-micropost">
               <span><%= link_to "投稿#{pluralize(current_user.microposts.count, "")}", current_user %></span>
           </div>
       </div>
 
```
```css
 
body {  
padding-top: 60px;  
background-color: #e9f8ea;  
}  
 
     ・  
     ・  
     ・  
 
 
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
z-index: 999;
}
      ・
     ・
      ・
      ・
 
.index-profile {  
 margin-right: 1000px;  
}  
.index-my-information {
 height: 250px;
 background-color: white;
 margin-top: -50px;
 margin-left: 20px;
 border-radius: 10px;
 position: relative;
 z-index: 1;
}
.user_info {
 position: absolute;
 top: 80px;
 z-index: 2;
}
.user-info-micropost {
 position: absolute;
 top: 180px;
 left: 20px;
 font-size: 30px;
 z-index: 3;
}
```
###試したこと
①**div class="index-my-information"**にz-indexの値を-で設定するとheaderの下に潜り込みますが、リンクが消失してしまいました。
②リンクを機能させる対策として**pointer-events: none;**をcssに書き込みましたがうまく動きませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
###追加
コードが汚くてすみません。。。
①「**.header**を**body**直下に置く」とはこういうことでしょうか?
```css
body {
padding-top: 60px;
background-color: #e9f8ea;
.header {
 width: 100%;
 height: 40px !important;
 background-color: #ffffff;
 position: fixed;
 margin-top: -60px;
 text-align: right;
 padding-top: 10px;
 box-shadow: 0 2px 3px 0 #ddd;
 z-index: 999;
 }
}
```
試してみましたが、結果は変わらず.headerが.index-my-informationの下に来てしまいました。。。
  • CSS3

    3895 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    7482 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 4

    2638 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1951 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る