CSS位置値に応じて幅と高さの値を設定します(Feat.z-index)

書く理由
フロントを開発する際に一番難しいのはCSSだと思います😂
いつも変な怪物を作り出す.
以前はプロジェクトを行っていた時、フロントの開発を何度も担当していました.
一番難しい部分はwidth, heightの価格が思ったほど設定されていないことです.だから勉強を通して問題を解決したが、いつも忘れてしまう.
頭の中の蓄えが悪いので、メモしておきます.🥺
1. position: staticpositionのデフォルト値
基本要素の配置順序に応じて、上から下、左から右に順に配置し、子要素が親要素内に存在する場合、親要素の位置に応じて配置します.
(その他のMEMO👀 ) z-indexも静的には適用されません.
以上のことから、position: relativeと同様の特性を有することが分かる.では、position: relativeと何が違うのでしょうか.
2. position: relative
position:静的とは異なり、既存の位置に基づいて座標プロファイルを使用できます.
👽 座標プロパティとは?top, bottom, right, leftの価格を指します.position: staticのように、基本要素の配置順に上から下、左から右の順に配置し、親要素内にサブ要素として存在する場合、親要素の位置を基準に配置する.
さらに座標propertyを用いて位置決めすることができ、これはstaticとrelativeの違いになる.
3. position: absolute
既存の要素の流れから離れ、静的な要素ではなく最近の親要素に基づいて位置を決定します.
つまり、relative, absolute, fixed%が主張する親や祖先の要素を基準に位置を決める.
したがって、親要素を配置の基準とする場合は、親要素のpositionの値をstaticからrelativeに変更する必要があります.
4. position: fixed
親要素が何であるかにかかわらず、ビューポートに対して座標プロファイルを使用して位置を移動でき、スクロールによって失われることなく固定されます.fixedはabsoluteと同じで、block要素のwidthはcontentによって変化するので、適切なwidthを指定する必要があります.
5.位置値の幅、高さ値による原理
width、height値は絶対に継承されません.

absolute、fixedを使用する場合、ブロックレベル要素のwidthはinline要素と同様にcontentに応じて変化し、適切なwidthを指定しなければならない.

relativeを使用する場合、widthwidthの値を親要素の100%として別途指定しないと、heightの値は内容に応じて変化します.

staticはrelativeと同じです.

6.位置値によるz-index問題position: staticの要素とstatic이 아닌 요소が重なると、static인 요소を覆います.
このような状態で、静的要素の優先度を最も高くするために、z-indexを少し高めることができるだろうか.もちろん適用されません.staticはz-indexのパーセンテージを適用しないので、相対的に位置値を変更しなければならない.
7.top、左の値の使用を追加(実際のプロジェクトで解決した問題を記録)

<!--html-->
<section class="scroll-section" id="scroll-section-0">
	<h1>Air Pro</h1>
	<div class="sticky-elem sticky-elem-canvas">
          <canvas id="video-canvas-0" width="1920" height="1080"></canvas>
	</div>
</section>

.sticky-elem {
  position: fixed;
  width:100%;
}

.sticky-elem-canvas {
    top:0;
    height: 100%;
}

.sticky-elem-canvas canvas {
    position: absolute;
    top: 50%;
    left: 50%;
}

canvasのtop, left値を調整するには、位置値をabsoluteとして指定します.sticky-elemクラスの位置値はfixedであるため、canvasの親要素はsticky-elemクラスの要素となる.したがって、親要素の上に配置する座標プロファイルが適用されます.
親要素はfixedであるため、他の値が指定されていない場合、widthheight値はコンテンツのサイズによって決定され、width:100%にランダムに指定されます.また、height値を100%に設定します.これは、座標propertyのtop値とleft値を適用するためです.
canvasもabsoluteなのでwidth値はコンテンツのサイズによって決まります.ここでは特に指定はありません.