C-6. 要素を絶対配置する

2021.12.20

絶対配置を理解しておこう

数学の絶対値と同じで、原点からどれだけ離れた距離に配置されているのかを示します。

起点からどれだけ離れているかを指定します。

position:absolute;

起点からどれだけ離れているかを指定できます。

実際に記述して確認してみてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
 
  .absolute_sample {
    position:  absolute;        /* 要素の配置方法を指定 「起点は左上のカド」*/
    left:  20px;                /* 左からの位置指定 */
    top: 50px;                  /* 上からの位置指定 */
    padding:  20px;             /* 余白指定 */
    background-color: #00ffff;     /* 背景色指定 */
　}
</style>
 
<div class="absolute_sample">
    絶対配置になります
</div>

ブラウザでの実行結果

相対配置（relative） を知っておこう

現在配置される位置からどれだけ離れているかを指定して配置する。

relativeとabsoluteはセットで使う。

absoluteを指定する要素の親要素にrelativeかfixedをつけることで、親要素を起点に配置することができます。

実際確認してみてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  .absolute_parent {
      position:  relative;        /* 要素の配置方法を子要素の起点を指定 */
      left:  50px;                /* 左からの表示位置 */
      top: 10px;                  /* 上からの表示位置 */
      border: 6px solid red;      /* 枠線指定 */
      height:  100px;             /* 高さ指定 */
      width: 400px;               /* 幅指定 */
  }
  .absolute_sample {
    position:  absolute;        /* 要素の配置方法を指定 「起点は上左のカド」*/
    top: 0px;                  /* 上からの位置指定 */
    left:  10px;                /* 左からの位置指定 */
    padding:  5px;             /* 余白指定 */
    background-color: #00ffff;     /* 背景色指定 */
　　}
</style>
 
<div class="absolute_parent">
    <div class="absolute_sample">
        絶対配置の設定
    </div>
</div>

ブラウザでの実行結果

※:liveweaveを使って数値を変えてみよう。

z-index　重なり順を変え方法を知っておこう

要素の奥行き方向の座標を表し、重なった場合は、数字の大きい方が上位に位置します。

実際に記述して実行してみましょう。各要素を変更してどう表現されるかを知っておきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
   #example {
    position: relative;
  }
  .one, .two, .three {
    position: absolute;
  }
   .one  {
    z-index: 30;
    background-color: #FFEBCD;
    left: 0;
    top: 0;
  }
  .two {
    z-index: 20;
    background-color: #00FFFF;
    left: 20px;
    top: 20px;
  }
  .three {
    z-index: 10;
    left: 40px;
    top: 40px;
    background-color: #A52A2A;
  }
</style>
 
<div id="example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

ブラウザでの実行結果

課題

以下のような表示のサンプルのように、上下左右中央揃えでロゴを真ん中に配置するデザインを作成してください。（色、フォント自由）　作成したファイル名をindex_2_16.htmlにして送ってください。

実行結果

ヒント

使用する文は以下のようなものです！

1
2
3
4
5
6
7
8
9
10
z-index: ;
background-color: ;
width: ;
height: ;
 
//中央揃えの一例です。入る値は考えてみてください。
//他にもある場合はそちらでも可。
top: ; /* 上端を親要素の中央に配置 */
left: ; /* 左端を親要素の中央に配置 */
transform: translate(〇〇,〇〇 ); /* 中央揃えのための変換 */

親要素、子要素、relative、absoluteを意識して取り組みましょう！

課題・復習用検索キーワード

検索例
🔍CSS　relative absolute
🔍CSS　中央揃え
🔍CSS　translate　使い方