CSSにおける要素の相対的な配置

相対的な配置は、プロパティ positionの値に relativeを指定することで設定されます。 この配置により、要素を現在の位置から指定された量だけ移動させることができます。 この場合、ページ上の他のすべての要素は、 要素が元々あった場所にあるものと認識します。 つまり、このタイプの配置では、要素は通常のフローから外れません。

現在の位置からのオフセットは、 top、right、bottom、 およびleftプロパティで設定します。

例

まず始めに、配置を指定せずに2つのブロックを作成しましょう:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

例

最初のブロックにrelativeを追加しましょう。 オフセットを指定していないので、現時点では何も変わりません:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

例

次に、topプロパティを指定して、ブロックを上から 30px移動させましょう。 この場合、他のすべての要素は、 ブロックが元の場所に残っているかのように振る舞います:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

例

さらに、leftプロパティを指定して、ブロックを左から 40px移動させましょう:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

例

プロパティtop、right、 bottom、leftの負の値は、 反対方向に要素を移動させます。 例えば、topの正の値は下に移動させ、 負の値は上に移動させます。

2番目のブロックにtopプロパティの負の値を指定して、 40px上に移動させましょう:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

実践的な課題

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}