【CSS】positionのstickyとabsoluteを一緒に使う方法

友達からサイト制作のお仕事を頂いたので、遊びながら作ってたのですが、stickyめっちゃ楽しいですね。

一定の場所まで行ったら流れてくれるので、例えばTOPページの要素要素のタイトルや画像を固定しておくとなんとなく格好いいような印象になります。

ただ画像を固定する場合、そのままだと画像分スペースを取っちゃう見た目になるので場合によっては「なんか違うんだよな~」となっちゃうんですよね。

できればabsoluteと一緒に使いたい。

ということで、absoluteと一緒に使う方法を紹介します。

目次

positionのstickyとabsoluteを一緒に使うための構造

positionのstickyとabsoluteを一緒に使うには、どのような構造になるかまず知っておいた方が良いですね。

カラムを使ってどんな構造か作ってみたので参考にしてください↓

①stickyの範囲

②stickyを指定する範囲

③absoluteを指定する場所

コードにすると、こうなります↓

②{
	position: sticky;
	top: 0;
}

③{
	position: absolute;
}

①はどこいったんじゃい!と思われるかもしれませんが、stickyしといてねとcssで②に指定したら勝手に親要素の①を動く範囲だと理解して動いてくれるので、①には特に何か指定する必要はないのです。

cssすげ~!賢いですね!

実際の動きを見てみよう

上のコードじゃよくわからないと思うので実際に動かしてみましょう。

下記のコードで実装してみます。

(スマホだと変化はありません)

.tamesini1{
	position: relative;
	z-index: 100;
}
.tamesini2{
	position: sticky;
	top: 100px;
 z-index: -100;
}

.tamesini3{
	position: absolute;
	width: 50%;
	top: 50px;
	left: 0;
	z-index: 1 !important;
}

何も指定していない.ver

親要素①

②sticky指定

absolute指定

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

指定あり.ver

親要素①

②sticky指定

absolute指定

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

ダミー流れる文字

何も指定していないものと比べると、②の要素が狭くなっていることがわかります。

今回はわかりやすいように色と文字を②にもいれていますが、何も入れないと③でabsolute指定したら②はうっすーくなるんですよね。

なので例えば、画像を背景画像のように配置してstickyしたいなどという時にこの方法は使えます。

いやーだいぶ楽しいです。

背景っぽくしたい場合はz-indexでどの順番に重ねたいか指定しないといけないとか面倒なところもありますが、面倒だからこそ指定後の動きを見るとよくやった!と思えるというものです。

おなかすいたので終わります。

ではでは。またねー。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次