CSS配置位置

要素の配置条件 positionを通じて、要素の位置の標準!まず決めて、位置を設定します!

デフォルト、static:無条件
相対:要素自体に基づく
absolute:位置親要素ベース
固定:ビューポートベース(ブラウザ)ビューポートベース

top, bottom, left, right, z-index

positionと一緒に使うCSS属性!すべて負数を有効にします。 要素の各方向の距離を指定します。

.container .item:nth-child(2) {
    width: 140px;
    height: 70px;
    position: relative;
    /* 여기까지만 써주면 변화가 없음!! */
    top: 30px;
    left: 60px;
    /* 원래 내가 있던 자리에서 top left 만큼 이동*/
}

絶対使用上の注意事項

absolute親要素に対して位置に配置!環境と配置基準が変化するにつれて、それらは相互作用しません.位置では、親、すなわち親は静的ではなく位置基準を持つべきだ.すべての親要素に位置条件がない場合、最終的にはビューポートに基づいて配置されます.

.container .item:nth-child(2) {
    width: 140px;
    height: 70px;
    position: absolute; /*구조상 부모가 아닌 위치상 부모이기때문 실제 부모가 postion이 지정이 되어 있지 않으면 body ->html -> 뷰포트 기준이 됨. */
    bottom: 30px;
    right: 60px;
}

固定使用上の注意事項

fixedはビューポート(ブラウザ)に対して展開されます.環境と配置基準が変化するにつれて、インタラクションは消えます.

z-index

要素の重ね合わせの度合いを指定

デフォルト、auto、0:親要素と同じスタック
数字:数字が高いほど上になる

スタック順序(Stack order)

ユーザーに近い要素(上に積み重ねられた要素)を特定します。

要素に位置属性の値がある場合は、上にスタックされます.(デフォルトの静的除外)

条件が

1の場合、z-index属性の値が高いほど、その値が多くなります.

1号と2号の条件が同じであればあるほど、HTMLの次の(後の)構造であればあるほど、上の

である.

.container {
    width: 300px;
    background-color: royalblue;
    position: relative; /* 주로 postion : absolute 의 구조상의 부모 요소가 위치상의 부모요소가 될 수 있도록 position값을 */
}
.container .item {
    width: 100px;
    height: 100px;
    border: 4px dashed red;
    background-color: orange;
}
.container .item:nth-child(1) {
    position: relative; 
}
.container .item:nth-child(2) {
    position: absolute; 
    /* 상호 작용이 사라짐*/
    top : 50px;
    left: 50px;
}
/* 2번과 3번 요소를 비교했을 때 2번은 absolute이라는 배치 기준이 있는 반면 3번은 없기때문에 2번이 3번위에 쌓임*/

/* 1번과 2번 요소를 비교했을 때 z-index는 없음. 3번 조건으로 html 구조가 더 나중에 쌓연 2번 요소가 위에 쌓임*/

absolute、fixedを使用する場合の注意点:表示プロパティがblockに変更されたこと

block要素に変更したためwidthとheight値が適用されます.