DEVDEV

TailwindCSSでHeaderを固定する

作成日
2021-07-12
更新日
2021-07-12

className="sticky top-0 z-50"で固定する。

js
import Header from '@/components/organisms/header.js' export default function Layout({ children }) { return ( <> {/* ヘッダーを固定する */} <div className="sticky top-0 z-50"> <Header /> </div> {/* メインコンテンツ */} <div>{children}</div> </> ) }

Related

TAGS

TailwindCSS
CSS

SHARE