ホームページ作成講座[CSS編]要素配置のスタイル設定

作成日：
  1. HOME
  2. ホームページ作成講座
  3. 要素配置のスタイル設定

  1. 配置方法のスタイル指定
  2. 配置位置の指定
  3. 回り込みと解除の指定

配置方法のスタイル指定

position : relative/absolute/fixed/static
配置方法を指定します。
値にrelativeを指定すると、要素の左上を基準に相対的な位置に配置されます。
値にabsoluteを指定すると絶対的な位置に配置されます。親要素がstaticならブラウザ左上が基準になりますが、それ以外なら親要素の左上が基準になります。
値にfixedを指定すると、ブラウザ左上を基準にして要素を固定することができます。スクロールしてもその要素は固定されまままになります。
staticはデフォルトの状態です。次に考慮する配置位置を指定しても適用されません。
<style>
div.rect{
  height : 1000px;
  background-image : linear-gradient( to top , darkblue , aqua );
}
div.fix{
  position : fixed;
  top : 0px;
  left : 0px;
  width : 100%;
  height : 2em;
  line-height : 2em;
  border-bottom : 2px ridge silver;
}
</style>

<div class="rect"></div>
<div class="fix">固定されたdivタグ</div>
＜表示結果＞

position:fixedを指定したdivタグはスクロールしても上に貼り付いたままになります。ここに常に表示しておきたいものを記述したりできます。

配置位置の指定

top : 数値
positionで指定した基準の、上からどれくらい離すかを指定します。
bottom : 数値
positionで指定した基準の、下からどれくらい離すかを指定します。
left : 数値
positionで指定した基準の、左からどれくらい離すかを指定します。
right : 数値
positionで指定した基準の、右からどれくらい離すかを指定します。
＜表示結果＞

回り込みと解除の指定
＜表示結果＞
前へ