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