Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8737

【CSS】position: fixed; と z-index

$
0
0

position: fixed;

:sunny:指定した位置に要素を固定
:sunny:位置は top, bottom, left, right を使う

ezgif.com-video-to-gif.gif

上の動画をご覧いただくと、背景だけが動き
ずーっとログインボタンが同じ位置にあるのがわかるかと思います。
これは position: fixed; でログインボタンを固定しているためです。

ログインボタンCSS.
position: fixed;
  top: 50px;
  left: 500px;

【CSS】position: absolute; と position: relative;のときにも説明しましたが、サイトの左上を始点と考えて

上から 50px
左から 500px

のところにログインボタンを配置して
position: fixed; で ログインボタンよ、そこから動くんじゃない!:raised_hand:と命令しているわけです。

z-index

:sunny:要素の重なりの順番を指定する。
:sunny:0を基準として数字が大きいほど上に重なる。
:sunny:必ず position プロパティと一緒につかう。

さきほどの動画ですが、のんびりとしてとてもきれいな風景なので気球に乗って景色を観覧するのもいいなと思い、気球に乗ることにしました:smile:

気球.png

配置したのが下の動画になります:smile:
ezgif.com-video-to-gifのコピー.gif

ありゃりゃりゃりゃ・・・!:open_mouth:
気球が前にきてログインボタンが隠れてしまったじゃないか・・・!:rolling_eyes:
これは気球女子がじゃまだ。。
なんとかせねば:expressionless:

・・・というときに使うのが z-index です:smile:

ログインボタンcss.
  position: fixed;
  top: 50px;
  left: 500px;
  z-index: 1;

z-index は 0 を基準として数字が大きくなるほど上に重なる性質をもっているので、上にきてほしいログインボタンに 1 を設定しました。
z-index を使用するときは必ず position プロパティを使用するのがルールです。

では動画を確認してみましょう:smile:
ezgif.com-video-to-gifのコピー2.gif

気球女子が重なることなく、ログインボタンが上になりました:laughing:


Viewing all articles
Browse latest Browse all 8737

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>