CSS의 위치는 무엇입니까? CSS 위치 요약

이 기사에서 CSS의 위치는 무엇인지 알 수 있습니까? CSS 포지셔닝 요약에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Positioning은 다음과 같이 구분됩니다.

static(기본값): 페이지 요소의 position 속성의 기본값으로, 브라우저의 요소 배열 규칙에 따라 요소가 정렬됩니다. 웹 페이지에서.

참고: 현재 요소에 왼쪽, 오른쪽, 위쪽 및 아래쪽을 설정하는 것은 효과가 없습니다.

relative(상대 위치 지정): 원래 위치를 기준으로 위치 지정! 위치가 이전에 설정되지 않았거나 위치 값이 정적인 경우 상대 설정 후 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽 위치가 원래 위치를 기준으로 이동됩니다.

absolute(절대 위치 지정): 이것, 즉 문서 흐름과 분리된 위치 지정은 누구나 알고 있어야 합니다. 위치 지정 참조 개체는 자신의 부모이지만 자신의 부모는 위치 속성을 가져야 합니다(부모의 위치 속성이 정적이면 작동하지 않으며 절대, 상대, 고정 중 하나여야 함). 부모가 position 속성을 설정하지 않으면 body 요소가 나올 때까지 position 속성이 있고 정적이지 않은 조상 요소를 위쪽으로 찾습니다.

fixed(고정 위치 지정): 이 속성은 브라우저 창을 기준으로 요소의 위치를 ​​지정하는 데 사용됩니다. 슬라이더를 어떻게 움직여도 브라우저 창을 기준으로 고정된 위치에 고정됩니다. 형제 요소는 배치 시 이를 무시합니다. 이때 사용되는 위쪽, 아래쪽, 왼쪽, 오른쪽도 브라우저 창을 기준으로 합니다.

내 경험을 아래에 공유하겠습니다.

1. 이전 IE6에서는 이를 지원하지 않는 문제가 해결되었습니다.

2. 상위 요소에는 위치 속성(정적 아님)과 패딩 값이 있습니다. 하위 요소가 절대값만 설정하면 상위 요소의 패딩 값은 무시되지 않습니다. 설정하면 상위 요소가 요소의 패딩 값을 무시합니다.

3. 절대 속성이 있는 요소의 수평 센터링 방법 공유:

방법 1: 일반적으로 left: 50%를 사용한 다음 margin-left: -width/2를 사용하여 수평 센터링을 설정합니다. . 방법으로는 면접시 가로중심 배치 방법을 묻는다면, 아래와 같은 방법으로 가산점을 추가하시면 됩니다!

방법 2: 하위 요소를 왼쪽: 0, 오른쪽: 0으로 설정한 다음 여백: 0 자동을 설정하여 수평으로 가운데에 배치합니다.

4. 포지션을 설정한 후에는 플로트와 마진의 변화에 ​​주의해야 합니다. 이는 매우 중요하며 나중에 논의하겠습니다.

관련 권장 사항:

CSS3 애니메이션 속성: 변환 속성 소개

CSS3의 의사 요소로 버블 상자를 구현하기 위한 코드(전, 후)

위 내용은 CSS의 위치는 무엇입니까? CSS 위치 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!