position

positionプロパティは、要素の配置方法を指定します。値には以下のものがあります。

static 「静的な、面白みのない」の意。配置位置を指定しません。デフォルトで指定されています。
relative 「相対的な、比較上の」の意。相対位置です。staticで表示される位置を基準とします。
absolute 「絶対の、制約のない」の意。絶対位置です。親要素にstatic以外が指定されていれば親の左上を、staticが指定されていればウインドウ全体の左上を基準とします。
fixed 「固定した、動かない」の意。絶対位置でかつ、スクロールしても位置が固定されます。
sticky 「ネバネバする、粘着する」の意。スクロールに応じて、要素を固定することができます。例えば「一番上までスクロールすると固定される」というような指定ができます。

実際に位置を指定するには、top、bottom、right、leftを使います。

例
p {
  position: relative;
  top: 50px;
  left: 80px;
}

この例では、基準位置に対して「上から50px、左から80px」の位置を指定しています。

なお、CSSではブロック内( {}の中 )で改行したり、半角スペースをいれたりしても、表示に影響しません。読みやすくなるのでオススメです。

参考記事

position-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階 で、将来、細かい部分に変更がないとは言

コメント

タイトルとURLをコピーしました