相対位置

Frontend SELF JA

レベル 21 , レッスン 2

使用可能

3.1 position: relative

CSSの相対位置を使用すると、要素がドキュメントのフロー内で最初の位置から移動できます。 position: relativeを使用すると、要素は通常のフローに位置を保持しながら、 top, right, bottom, leftプロパティを使用して移動できます。これらのプロパティを使って、要素を通常の位置から移動させることができます。

相対位置の基本原則

相対位置付け (position: relative) では、要素はドキュメントのフロー内の元の位置から移動されます。これによって影響を受けるのは、その要素自体のみであり、他の要素はその場所にとどまります。要素が移動されなかったかのようです。これにより、要素が互いに重なり合ったり、視覚的な余白を作成したりする効果が可能になります。

構文:

    
      .element {
        position: relative;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

例えば:

top: 通常の位置から下に移動
right: 通常の位置から左に移動
bottom: 通常の位置から上に移動
left: 通常の位置から右に移動
<値>: CSSで有効な長さの値 (px, %, em など)

3.2 プロパティ top

topプロパティは、要素を初期位置から下に移動させます。

topの使用例:

CSS

    
      .relative-top {
        position: relative;
        top: 20px; /* 要素を20ピクセル下に移動させる */
      }

使用例:

CSS

    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-top {
        position: relative;
        top: 20px;
        background-color: lightblue;
      }

HTML

    
      <div class="container">
        <div class="box static-box">通常のブロックです</div>
        <div class="box relative-top">このブロックは20px下に移動します。</div>
        <div class="box static-box">通常のブロックです</div>
      </div>

3.3 プロパティ right

rightプロパティは、要素を初期位置から左に移動させます。

rightの使用例:

CSS

    
      .relative-right {
        position: relative;
        right: 20px; /* 要素を20ピクセル左に移動させる */
      }

使用例:

CSS

    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-right {
        position: relative;
        right: 20px;
        background-color: lightgreen;
        padding: 20px;
      }

HTML

    
      <div class="container">
        <div class="box static-box">通常のブロックです</div>
        <div class="box relative-right">このブロックは20px左に移動します。</div>
        <div class="box static-box">通常のブロックです</div>
      </div>

3.4 プロパティ bottom

bottomプロパティは、要素を初期位置から上に移動させます。

bottomの使用例:

CSS

    
      .relative-bottom {
        position: relative;
        bottom: 20px; /* 要素を20ピクセル上に移動させる */
      }

使用例:

CSS

    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-bottom {
        position: relative;
        bottom: 20px;
        background-color: lightcoral;
        padding: 20px;
      }

HTML

    
      <div class="container">
        <div class="box static-box">通常のブロックです</div>
        <div class="box relative-bottom">このブロックは20px上に移動します。</div>
        <div class="box static-box">通常のブロックです</div>
      </div>

3.5 プロパティ left

leftプロパティは、要素を初期位置から右に移動させます。

leftの使用例:

CSS

    
      .relative-left {
        position: relative;
        left: 20px; /* 要素を20ピクセル右に移動させる */
      }

使用例:

CSS

    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-left {
        position: relative;
        left: 20px;
        background-color: lightgoldenrodyellow;
        padding: 20px;
      }

HTML

    
      <div class="container">
        <div class="box static-box">通常のブロックです</div>
        <div class="box relative-left">このブロックは20px右に移動します。</div>
        <div class="box static-box">通常のブロックです</div>
      </div>

3.6 隣接する要素との相互作用

position: relativeの要素はドキュメントの通常のフローに残り、移動されていない場合と同じスペースを占有します。これにより、他の要素の配置を変更せずに、要素を移動することができます。

使用例:

CSS

    
      .container {
        border: 2px solid #000;
        padding: 10px;
      }

      .box {
        position: relative;
        background-color: #e74c3c;
        color: white;
        padding: 20px;
        margin: 10px;
        width: 200px;
      }

      .box1 {
        top: 20px;
      }

      .box2 {
        left: 20px;
      }

HTML

    
      <div class="container">
        <div class="box box1">要素1 (下に移動)</div>
        <div class="box box2">要素2 (右に移動)</div>
        <div class="box">要素3 (通常の位置)</div>
      </div>

コードの説明:

.box1: 要素は20ピクセル下に移動されていますが、通常のフローの位置はそのままで、他の要素が元の位置に対して配置されます。
.box2: 要素は20ピクセル右に移動されていますが、通常のフローの位置はそのままです。

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION