66080


## 概要

現在、GatsbyJSでWebサイトを作っていますが、CSSの重なり順で詰まってしまいました。  
具体的には、headerを`position sticky; top:
0;`で最上部に固定し、そのheaderはページ共通にするためにlayoutコンポーネントに入れています。また、その一つ下に`<main>{children}</main>`の様にして、main要素として子コンポーネントを表示する様にしています。  
そして、ページをスクロールしたときにはmain要素のコンテンツがheaderの下に潜る様にしようと思い、`z-index`などを指定してみましたが、中々思った通りの挙動をしてくれません。  
レイアウトには`styled-components`を使用しています。

自分なりに調べてみましたが、解決せず。  
どなたか解決方法のご教授お願いいたします。

## 該当するコード

[code]

    // header.js
    
    import React from 'react';
    import styled from 'styled-components';
    import { Primary } from '../const/color';
    import Menu from '../images/Menu.png';
    import { Link } from 'gatsby';
    
    const Header = () => (
      <$Header>
        <$Ul>
          <$Li style={{ color: `${Primary}` }}>
            <$Link to="/">Home</$Link>
          </$Li>
          <$Li>
            <img src={Menu} alt="Menubar" />
          </$Li>
        </$Ul>
      </$Header>
    );
    
    const $Header = styled.header`
      width: 100%;
      height: 50px;
      position: sticky;
      top: 0;
      z-index: 100;
    
      box-shadow: 1px 0 1em;
    `;
    const $Ul = styled.ul`
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: auto;
    `;
    const $Li = styled.li`
      margin: 0 1em;
    `;
    const $Link = styled(Link)`
      text-decoration: none;
      color: ${Primary};
    `;
    
    export default Header;
    
    
[/code]

[code]

    // pages/about.js
    
    import React from 'react';
    import styled from 'styled-components';
    import Title from '../images/title/About.png';
    import Layout from '../layouts';
    
    export default () => (
      <Layout>
        <$H1>
          <img src={Title} alt="Title for About" style={{ margin: '0 auto' }} />
        </$H1>
        <h1>test</h1>
      </Layout>
    );
    
    const $H1 = styled.h1`
      margin-top: 40px;
    `;
    
    
[/code]

[code]

    // layout/index.js
    
    import React from 'react';
    import styled from 'styled-components';
    import Footer from '../components/footer';
    import Header from '../components/header';
    
    export default ({ children }) => (
      <Wrapper>
        <Header />
        <main>{children}</main>
        <Footer />
      </Wrapper>
    );
    
    const Wrapper = styled.div`
      width: 100%;
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    `;
    
    
[/code]


CC BY-SA 4.0
2020-04-28T08:03:02.337
66065
2020-04-28T14:31:34.890
32711
question
css reactjs gatsby
position: sticky; しているheaderのz-indexが効かない。


headerにbackground-colorが設定されておらず、背景が透過されているだけでした…。  
確認不足で申し訳ございません…。  
ご回答ありがとうございました。


CC BY-SA 4.0
2020-04-28T14:31:34.890
66080
2020-04-28T14:31:34.890
32711
66065
answer