Absolute 및 Relative

주말 동안 css-postion의 기준을 한 번 읽고 Absolute와 Relative에 대한 이해를 여기에 기록했습니다.
Positioning schemes
css에는 다음 세 가지 포지셔닝 시나리오가 있습니다.

Normal flow

Floats

Absolute positioning

Normal flow는 가장 흔히 볼 수 있는 BFC와 IFC이다. 즉, 흔히 말하는 블록급 요소가 위에서 아래로 내연 요소가 왼쪽에서 오른쪽으로 배치되는 상황이다.Floats는 흔히 볼 수 있는 상자의 수평 레이아웃의 상황입니다.Absolute positioning은 상자를 Normal flow에서 완전히 벗어나게 하고 top, left 등의 속성을 설정하여 position을 결정합니다.
주의: 여기에서 플로츠와 Absolute는 out-of-flow의 것만 언급했고 Relative는 언급하지 않았다.나는 많은 문장을 보았는데, Relative도 상자를 흐름에서 벗어났다는 것은 잘못된 표현이다.
Containing Blocks
한 원소의 상자의 위치와 크기는 보통 특정한 직사각형으로 계산되는데 이 특정한 직사각형은 원소의 containing block이다.static과 relative의 원소에 대해 그의 containing block은 일반 상자와 같고 일반적으로 그의 가장 가까운 부급 원소(nearest ancestor)를 가리킨다.fixed(이번 문장 안에 있지 않으면 표를 누르지 않음)와 absolute에 대해 다음과 같은 표현이 있다.

containing block은 최근의 positon이 static과 같지 않은 조상 원소에 의해 만들어졌다.

가장 가까운 조상 원소가 블록급 원소(block-level)라면 containing block은 상자의 내부 간격층(padding edge)에서 만든다.

가장 최근의 조상 원소가 내연급 원소(inline-level)라면 containing block은 쓰기 모드의 direction 속성에 의해 결정된다.이런 상황은 비교적 쓸모가 없어서 분석하지 않겠다.

에 조상 원소가 없거나 조상 원소가 position을 static 이외의 값으로 설정하지 않았다면 containing block은 initial containing block이다.

주의: 위의 세 번째 점에 대해 initial containing block은 body을 가리키는 것이 아니다. 나는 많은 문장들이 이곳을 body이라고 말하는 것을 보았다.
Relative positioning
상대적 포지셔닝: 자신에 대한 포지셔닝이다.normal flow에서 원소의 크기는 변하지 않으며 top 등 속성을 설정하여 원소가 자신에 대한 위치를 바꾼다.그래서 relative의 원소에 의해 다른 원소와 중첩될 수 있지만 이후의 원소의 위치에 영향을 주지 않는다.상대적으로 포지셔닝된 상자는 후대 노드에 새로운 절대 포지셔닝의 containing block을 만들 것이다.
Absolute positioning position： absolute과 position： fixed은 모두 Absolute positioning을 가리킨다.본문은 잠시 position: absolute만 토론한다.Absolute positioning은 절대 포지셔닝이라고 불린다.절대적인 포지셔닝 요소는 그 containing block에 따라 결정된 것으로 normal flow에서 완전히 벗어나 후속적인 형제 노드의 구조에 아무런 영향을 주지 않는다.절대 포지셔닝 상자는 후대 노드에 새로운 절대 포지셔닝 containing block과 하위 노드에 normal flow의 containing block을 생성합니다
top, right, bottom, left
한 원소의position 속성이 static을 제외한 값으로 설정되면 이 원소의 위치는 top, right, bottom, left 이 네 가지 물리적 속성에 의해 결정된다.left、right이나 bottom、top을 동시에 설치할 때 경쟁 상황이 나타날 수 있으니 주의하세요.
엔딩
여자친구가 css를 배우고 있기 때문에 제가 옆에서 지도를 해야 하기 때문에 css는 항상 제 약점입니다. 그래서 저는 주말 동안 css-position의 기준을 정리했습니다. 이렇게 지도하면 저력이 있습니다.이 글은 기본적으로 아래에 참고한 링크에 대한 필기입니다. 제가 이 부분의 내용을 배웠을 때 인터넷에서 다른 사람의 블로그를 찾았는데 표준과 맞지 않는 부분이 많았고 이날도 많은 의혹을 풀었습니다.배우고 싶은 학생이 있다면 css-positon의 초안을 직접 보십시오. 비교적 믿을 만하고 초안에 example도 적지 않습니다.
참조:
초안