【CSS-rules】position

positionは、他の要素の影響を受けず、他の要素に影響を与えずに要素を独立した状態で配置するcssプロパティ。

使い方に多少癖はありますが、上手く使う事で柔軟なレイアウトが可能になります。

position の種類

• position 位置の指定方法はstaticを除き同じですが、親となる要素や作動は値ごとに異なります。
• 高さ(height) はどれも内容に準じた auto になりますが、幅(width)は値ごとに異なります。

position の位置指定

top(上), right(右), bottom(下), left(左) を組み合わせて親に対する位置や距離を指定します。

• inset利用を除き、基本的にtop(又は bottom):距離; left(又は right):距離; の２方向をそれぞれ指定します。
• top(上), bottom(下)を同時に指定した場合はtopが優先されます。
• right(右), left(左)を同時に指定した場合はleftが優先されます。
• 右上が起点となりますので、top:0;と left:0;は記載しなくてもOKです。

レイアウトや値によって inset を使用した方が、シンプルに設定できる場合もあります^^

position 値ごとの説明

共通となるcssはまとめて、それぞれclassを２重掛けにしています

.t11 {
  max-width: 510px;
  padding: 10px;
  border: solid 1px #ccc;
}
.t11 .demo {
  padding: 10px;
  background-color: coral;
}
.t11 div > div {
  padding: 10px;
  color: #fff;
  background-color: #333;
} 

position: relative;

• 自身を親とする為、包括要素に position は必要ありません。
• 通常の要素として配置された自身の位置とサイズを基準に、独立要素として指定した量移動します。
• 通常の要素としての本来の位置を保持します。
• 位置指定で本来の位置からはみ出た部分は他の要素から独立し、他の位置に影響を与えずに重なる形になります。
• width, height は、通常の要素と同じです。

.t11a {
  display: flex;
  column-gap: 10px;
  flex-wrap: nowrap;
}
.t11a > div {
  flex: 0 1 120px;
  aspect-ratio: 1 / 1;
} 
.t11a .demo {
  position: relative;
  top: 30px;
  left: 30px;
}

<div class="t11">
  <div class="t11a">
    <div>通常のBOX</div>
    <div class="demo"><strong>【relative】</strong><br>top: 30px;<br>left: 50px;</div>
    <div>通常のBOX</div>
    <div>通常のBOX</div>
  </div>
</div>

position: absolute;

• 包括要素(親要素)に、 static以外のposition ( relative, absolute, fixed, sticky) のいずれかが必要です。いずれもない場合は ビューポート= body が親となります。
• 親要素の位置を基準に、独立要素として指定した量移動します。
• absoluteは他の要素から独立して存在し、他の位置に影響を与えずに重なる形になります。
• 特にサイズ指定をしない限り、width, height は、ボックスレベル、インラインレベルに関わらず auto として内容に準じます。

.t11b {
  position: relative;
}
.t11b > div {
  height: 60px; 
  margin-bottom: 5px;
} 
.t11b .demo {
  position: absolute;
  top: 30px;
  left: 30px;
}

<div class="t11">
  <div class="t11b">
    <div>通常のBOX1</div>
    <div class="demo"><code><strong>【absolute】</strong> top: 30px; left: 50px;</code></div>
    <div>通常のBOX3</div>
    <div>通常のBOX4</div>
  </div>
</div>

position: fixed;

fixedは指定に癖がある為、扱いに注意が必要です。

• 基本的にビューポート、又は、特定条件の要素を包括要素(親要素)とする為、直接の親要素からの制約は受けません。 ( positionをかけても無視されます) 。
• BOX要素を包括要素(親要素)にする場合
  • 祖先要素に特定のプロパティ(filter, transform, perspective)を掛ける事で、その要素を包括要素(親要素)とする事が出来、要素内で Fix するようになります。
  • 親となった祖先要素にrelative 等の指定は不要です。
  • 親となった祖先要素がスクロールした段階で、absolute と同じ動きになり一緒に移動します。
    sticky の逆の動きという感じですね。
• 包括要素(親要素) を基準に、独立要素として指定した量移動します。
• fixedは他の要素から独立して存在し、他の位置に影響を与えずに重なる形になります。
• 特にサイズ指定をしない限り、width, height は、ボックスレベル、インラインレベルに関わらず auto として内容に準じます。

祖先要素に条件プロパティがかかっていると、その要素が親となり想定外の位置になる場合があります。fixedを使用する際はご注意ください。

.t11c {
  height: 160px;
  overflow-y: scroll;
}
.t11c .demo {
  position: fixed;
  top: 50px;
  right: 30px;
}

<div class="t11" style="transform: translateX(0);">
  <div class="t11c">
    <div class="demo"><code><strong>【fixed】</strong></code></div>
    <div>包括ブロック(親要素)はビューポート～～</div>
    <div>width, heightを指定しない場合～～</div>
    <div>祖先要素に特定のプロパティ(filter～～</div>
    <div>感覚として、sticky の逆の動き～～</div>
  </div>
</div>

position: sticky;

最初は、relative として配置され、スクロールによって fixed 同様に固定位置に変化します。

• 自身の位置を基準とする為、親要素に position は必要ありません。
• スクロールが作動条件の為、親要素に高さ指定とスクロール指定が必要です。
• width, height は通常の要素と同じです。
• ブロックレベルでwidth指定をしない場合 left指定は無視され、left: 0;として扱われます。

親要素にoverflow:hiddden; 等、スクロールを阻害するプロパティが掛かっていると動きません。

.t11d {
  height: 220px;
  overflow-y: scroll;
  padding:30px 20px;
  color: #fff;
  background-color: #333;
}
.t11d div {
  margin-bottom: 10px;
} 
.t11d .demo {
  position: sticky;
  top: 0; left: 50px;
  width: 50%;
}

<div class="t11 t11d">
  <div class="demo"><code><strong>【sticky】</strong></code></div>
  <div>親BOXの内容が～～</div>
  <div>最初は普通の要～～</div>
  <div>ブロックレベル～～</div>
  <div>スクロールが前～～</div>
</div>