positionプロパティ

positionプロパティは、要素の配置方法を指定します。 このプロパティは、多くの場合、 上、右、下、左のオフセットをそれぞれ設定する top、 right、 bottom、 leftプロパティと 組み合わせて使用されます。

構文

cssセレクタ {
  position: absolute | relative | fixed | static | sticky;
}

positionの値

デフォルト値: static。

例 . 絶対配置

小さなオフセットを付けて、要素を画面の左上隅に配置します:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

例 . 絶対配置

今度は、小さなオフセットを付けて、要素を画面の右上隅に配置します:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

例 . 固定配置

固定配置では、要素はスクロールしても同じ場所に留まります:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

例 . 相対配置

相対配置では、要素は通常の位置を基準に移動しますが、 他の要素は要素が移動していないかのように振る舞います:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

例 . 入れ子

親要素のpositionプロパティの値がrelativeの場合、 絶対配置された子要素は親要素を基準に配置されます:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

例 . 入れ子

親要素のpositionプロパティの値がabsoluteの場合、 絶対配置された子要素は親要素を基準に配置されます:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

例 . 粘着配置

要素のpositionプロパティの値がstickyの場合、 要素はスクロールで指定された位置に達するまではrelativeのように振る舞い、 その後、その場所に貼り付きます。 粘着ヘッダーを作ってみましょう:

html<h1>メインサイトヘッダー</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

例 . 位置指定なし

要素に絶対配置を指定しながら位置を指定しない場合、 要素は位置指定なしのときの場所に留まりますが、 他の要素はその要素を認識しなくなります:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

例 . 単一の軸

絶対配置では、単一の軸に対してのみ位置を指定することができます。 例えば、topプロパティを指定すると、 要素は垂直方向には指定された位置に配置されますが、 水平方向には元々あった場所のまま留まります:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

例 . すべての位置

絶対配置では、幅と高さを指定せずに、 すべての辺に対して位置を指定することができます。 この場合、要素は親ブロックの中央に配置されます:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

関連項目