CSS入門

4章.CSSで表示位置の設定をする

この記事ではCSSにおけるオブジェクちの表示位置の設定について説明していきます。

二つのオブジェクトが重なってしまった場合のアプローチ

z-indexプロパティを利用することで、どちらかのオブジェクトよりも前に表示するなどの優先度の設定が可能です。またpositionプロパティによって兼ねて表示したオブジェクトを起点を基にしてどこに表示するかを設定できます。


.test1 {
  position: absolute;
  z-index: 1;
}
 
.test2 {
  position: absolute;
  z-index: -1;
}

特定のオブジェクトをスクロールされても常に表示されるようにする

postionプロパティにfixedを設定することにより、該当のオブジェクトがスクロールされても常に表示されるようになります。

ナビゲーションパーツに対して使用されることが一般的です。

navbar {
postion : fixed;
}

オブジェクトの並べ方

各オブジェクトの配置方法ですが、displayプロパティにより設定が可能です。

オブジェクトを縦に並べたい

displayプロパティにblockを設定することで一つの要素を横幅いっぱいに広げて、縦にオブジェクトを並べることができます。

.test {
  display: block;
}

オブジェクトを横に並べたい

displayプロパティにinlineを設定することで複数の要素を横に並べます。一つ一つの要素に対して表示領域を設定することができず、設定したコンテンツの大きさによってサイズが変わります。

.test {
  display: inline;
}

オブジェクトを横に並べてかつ、オブジェクトの表示範囲も自由に設定したい

displayプロパティにinline-blockを設定することで複数の要素を横に並べます。また一つ一つの要素に対して表示領域を設定することが可能です。

.test{
  display: inline-block;
}