こんにちは、ナカムラです。
今日はposition:stickyを使った時のちょっとしたお助けプロパティをご紹介します。
課題点
ECサイトやポータルサイトの検索結果ページなどでよく使われるレイアウトに、検索結果一覧の横に絞り込み検索が表示されているものがあります。 絞り込み条件も長くなるので、選択してすぐ検索ボタンを押せるように、position:stickyを用いてボタンを追従させると使いやすくなります。
この時、検索枠の親要素が角丸だった場合、
追従しているときは四角いオブジェクトの状態として表示し、
元の位置に戻った時は、親要素の角丸に合わせてトリミングされる。
このようなデザインの時はどうしますか？
overflow:hiddenを使いたいところですが、position:stickyを使用している場合、その親要素にoverflow:hiddenをつけることができません。（追従する際の基準点が変わってしまうため）
解決方法
そこで使うのがoverflow: clipになります。
プロパティは同じoverflowですがclipは全てのスクロールを禁止する仕様のため、追従する際の基準点が変わらず、position:stickyが意図した動作をすることができます。
DEMO
See the Pen Untitled by Nakamura (@takayo-nakamura) on CodePen.
もう一つのプロパティ
overflowは要素からコンテンツが溢れた時にどうするか、というプロパティになります。
これとは別に同じような効果のあるプロパティがあります。
contain:paint
親要素の境界外の表示を防ぎます。
表示上は同じようなものですが、containプロパティは文書ツリーから独立させ、containプロパティを指定した要素がページ全体のレイアウトに影響しないように制限するなどの目的があります。
パフォーマンス向上のために活用でき、広告バナーなど直接コンテンツと関わらない要素やウィジェットなどに使われます。
このプロパティについてはまだまだ理解が足りていないのでもう少し勉強して活用していきたいと思います。
