CSS 세 가지 위치 지정 일반, 부동 및 절대 위치 지정에 대한 자세한 소개

이 글에서는 세 가지 CSS 위치 지정 규칙인 플로팅과 절대 위치 지정을 자세히 소개합니다.

정규 흐름, 일반 flow 흐름, 문서 흐름

일반적인 정규 흐름 표시 방법은 다음과 같습니다

정상 해당 흐름에 따라 표시됩니다. 요소 특성상 인라인 요소는 한 줄을 차지하고, 블록 수준 요소는 한 줄 이상을 차지합니다.

블록 수준 요소에 따라 맏형, 둘째, 셋째 형이 위에서 아래로 순서대로 배열되어 있습니다. 이것이 일반적인 흐름입니다.

Floating

이름에서 알 수 있듯이 Floating은 일반적인 흐름 위에 떠 있는 것입니다. 기능: 한 행에 여러 상자를 배치하는 문제를 해결합니다(일반적으로 다음 상자는 한 행만 차지하고 여러 상자는 여러 행을 차지함). 상자는 고도로 제어 가능합니다.

부동 특성: 부동 요소는 정렬 시 위에 정렬됩니다.

float:left;

큰형은 뜨지 않아서 에 있을 거예요. 둘째 형제 정렬의 위치입니다.

플로팅은 표준 흐름에 영향을 주지 않으며 표준 흐름은 여전히 ​​원래 위치에 있습니다. 여기의 넷째 형제는 부동 설정이 없고 매우 높습니다. 위의 작은 줄은 큰 형제와 다른 사람들이 덮고 있지만 넷째 형제는 전체 줄을 차지합니다. 다른세 형제가 몸 위에 떠있습니다.

그래서 float는 표준 스트림에 오버레이됩니다.

Floating collation

여러 개의 부동 상자와 부동 상자가 함께 있는 경우 페이지에 나타나면 플로팅 상자는 플로팅 상자와 정렬되고, 플로팅이 아닌 상자는 일반 흐름에 따라 플로팅이 아닌 상자와 정렬됩니다.

플로팅은 요소의 표시 모드를 변경합니다. 요소의 표시 모드를 다음과 같이 변경합니다.

왼쪽 및 오른쪽은 이전 플로팅 요소 배열 위치, 동일한 위치에 플로팅 요소가 여러 개 있는 경우 왼쪽 플로트는 왼쪽 플로트를 찾고 오른쪽 플로트는 오른쪽 플로트를 찾습니다.

플로트가 떠있는 기준 위치는 무엇인가요?

플로팅 요소가 발견되지 않으면 표준 스트림 형태로 파싱됩니다.

플로팅 요소가 발견되면 플로팅 규칙에 따라 파싱됩니다. 플로팅 후 요소의 위치는 요소가 위치한 표준 스트림의 위치이며 표준 스트림을 덮어씁니다.

절대 위치

위 내용은 CSS 세 가지 위치 지정 일반, 부동 및 절대 위치 지정에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!