0

概要

現在、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;
`;

1
  • 1
    こちらの環境ではメインコンテンツがヘッダーの下に潜るような動作が実現出来ているように見えます。もしよろしければ、 コードスニペット上で問題が再現可能なコードを追記していただけませんか?
    – supa
    Commented 2020年4月28日 8:39

1 件の回答 1

1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。