要素の重なり方を再確認
cssの記事アクセス数を眺めているとstickyやz-indexなどの重なり系トラブルに関する記事が多いので、その辺りに関する基本をまとめておこうかと思います。
重なり系のトラブルといえば、たとえば「固定ヘッダーがスクロールしていく途中で別の要素にかぶさってしまった」、「ドロワーメニューを表示させたら別の要素に隠されて表示されない」というアレですね。
基本を２つか３つ覚えておけば大丈夫ですので極力シンプルに書きます。
超基本。後ろに書かれた要素が上に重なる
基本中の基本として、HTMLで後ろに書かれた要素は上に重なっていきます。
固定メニューを何者にも邪魔させない最もシンプルで短絡的な方法は、HTMLの最後に書くことです。
基本：要素の重なりは兄弟関係で考える
基本にして重要なポイントが「兄弟関係で考える」ことです。
z-indexにしろstickyにしろ、ここを抑えていればほぼ解決できるんじゃないかと思っています。下図を例に説明します。
ヘッダー、コンテンツ、フッタ−と大きなブロックが３つあり、ヘッダーとコンテンツの中にはそれぞれ子要素（item）が含まれています。
このとき、ヘッダー、コンテンツ、フッタ−が兄弟関係。item-A, -B, -Cが兄弟関係にあります。
z-indexもposition:sticky も、兄弟間で作用しあい他の要素には一切影響しません。
例：sticky
仮に、ヘッダーの「item」にposition:sticky; top:0;を指定しても何も起こりません。stickyは親要素(この場合ヘッダー)の中でのみ有効なので、唯一の要素であるitemをstickさせることはできません。ヘッダーと共に流れ去ります。
例：z-index
次のようにz-index値を指定したとします。
- ヘッダーをtop:0に固定。z-indexは１
- コンテンツとフッタ−にはz-indexを指定しない(初期値auto)
- コンテンツのitemには99〜9999のz-indexを指定
これをスクロールさせると、ヘッダーは何者にも邪魔されずにトップ表示されます。item-A , -B, -Cのz-index値はコンテンツの中での序列決めです。そしてitemsの親要素である「コンテンツ」は「ヘッダー(z-index:1 )」より下の階にいますので、ヘッダーはitemsを含めたコンテンツにかぶさる形でトップに表示されます。
知識：floatとposition
floatプロパティで左右寄せにした場合も、通常の流れから分離し上に重なるようになりますが、position指定するとさらにその上に重なります。 float < position(z-indexなし) < position(z-indexあり)
See the Pen absolute vs z-index vs float by Takashi Abe (@TakeshiAbe) on CodePen.
最初の基本２つだけ覚えておけば大抵のトラブルは問題なく解決できると思います。ご参考になりましたら。
