3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

divをたくさん重ねた時の重なり順を指定する

Posted at

##やりたいこと
こんな感じのサイトを作っていた時に、白いところが藍色のナビゲーションバーにかぶってしまって困った。
ので、ナビゲーションバーが一番上にくるように指定したい。

スクリーンショット 2017-05-10 0.30.49.png

##結論
z-indexプロパティを指定する。

まず、白いところはposition: absolute;で重ねてある。
同様に、ナビゲーションバーもposition: absolute;が指定してある。

こいつらに、z-indexというプロパティを指定してあげればいい。
z-indexプロパティは、数字が大きくなるほど上に重なる。

この場合は、ナビゲーションバーにz-index: 2;を指定して、
白いところにz-index: 1;を指定すれば、ナビゲーションバーに要素が重ならなくなる!!

ただ、これだと要素が増えるたびに数字をずらさなきゃいけなくなると思うんだけど
「この要素はどんな時でも絶対一番上にする!」っていう指定方法とかないのかな…

あれば教えてくださいo(`ω´ )o

3
6
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?