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;
}