CSS

CSS 重なり順序を指定する

投稿日:

背景画像を複数重ねるなら

CSS3 より、要素に複数の背景を適用できるようになりました。
複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて描画されます。

複数の背景は、各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。
この方法は、ショートハンドプロパティの background でも、個別のプロパティ(※background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size) のどちらでも利用可能です。

<サンプルコード>

参考:https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

 

ボックスの重なりは「z-index」

z-index は、ボックスの重なりの順序を指定するプロパティです。
この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効となります。

position プロパティで使える値をおさらい。

static 配置方法を指定しない
relative 相対位置への配置
absolute 絶対位置への配置
fixed スクロールしても固定される絶対配置

 

z-index プロパティは下記のとおり。

z-index auto 親要素と同じ階層にする(初期値)
数値 値が大きいものほど手前(前面)に表示される。(0が基準)

<サンプルコード>





-CSS

執筆者:

関連記事

今からレスポンシブサイトを作る時のメディアクエリとブレイクポイント【2017年度版】

新しくサイトを作ることになった。 もちろん、レスポンシブ対応で。 そこで改めて、ブレイクポイントを考えてみことにした。 Googleでは「モバイルファースト」を推奨している。さらに「モバイルファースト …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS>

  <HTML>

cl …

CSS★floatの解除にclearfix

floatの解除方法はいくつかありますが、 clearfixを使う方法が1番使い勝手がよいのでメモ。 floatを設定すると、要素が浮くことになり、 高さが消失してしまいます。 きちんとfloatを解 …

no image

リストマーカや番号の左側の隙間について

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。 ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の …

no image

コメントアウトの書き方★html & css & php

WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。 ちなみに、コメントアウトとは、ソースコード側に書いて …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。