html css 레이아웃 3가지 방식(자연 레이아웃/유동 레이아웃/포지셔닝 레이아웃)_HTML/Xhtml_웹페이지 제작

1. 자연스러운 레이아웃
수정하지 않은 레이아웃은 자동으로 남습니다.
2. 유동 레이아웃
위에서 언급한 float:left의 상황입니다.
3. 위치 지정 레이아웃
상대 위치 지정과 절대 위치 지정은 모두 상위 div 태그를 기준으로 합니다.
상대------이 요소의 원래 위치를 참조점으로 사용
절대--상위 div 태그의 원점(왼쪽 상단 모서리)을 참조점으로 사용합니다.

외부 레이어는 위치:상대이므로 내부 레이어가 절대 레이어인 경우 외부 레이어의 왼쪽 상단이 변위 기준으로 정렬됩니다. 물론, Outer Layer에는 position:relative만 쓰고 left와 top 두 값을 쓴다는 것은 이 요소의 원래 위치가 left와 top 정렬을 위한 레이아웃 기준 원점으로 사용된다는 뜻이다. .

또 다른 상황은 외부 레이어에 위치:절대값만 있고 위치:상대값이 없다는 것입니다. 이 경우 어떤 지점을 참조로 찾을 수 있나요? 이때 원칙은 부모 요소에 상대 요소가 있으면 상위 요소를 참조 원점으로 사용합니다. 위치: 상대 요소가 없으면 본문을 참조 원점으로 사용합니다. position:absolute의 외부 레이어에 상대 항목이 없으면 두 레이아웃 간에 차이가 없습니다.

물론 마지막 상황은 외부 레이어가 위치:절대이고 내부 레이어가 위치:상대인 경우 어떻게 될까요? 원래 원리에 따르면 절대값은 본문을 레이아웃 원점으로 참조하고 상대값은 원래 위치를 레이아웃 원점으로 참조합니다. 이때 실제로는 외부 레이어의 왼쪽 상단을 레이아웃 원점으로 참조합니다. .
그 외는 실제 상황에 따라 달라질 수 있습니다.