CSS 포지셔닝

CSS Positioning

CSS Position Positioning 속성

이 글에서는 주로 요소의 Position 속성을 소개합니다. 이 속성은 요소의 위치 지정 방법을 설정할 수 있습니다. 페이지.

목차

1. 포지션 소개: 포지션의 가치와 보조속성을 소개합니다.

2. 위치 위치 지정 방법: 절대, 상대, 고정, 기본값의 4가지 위치 지정 방법을 소개합니다.

3. 요약 위치: 위치를 예시로 보여줍니다.

1. 소개

1.1 설명

Position 속성: 요소의 위치 지정 유형을 지정합니다. 즉, 요소는 문서 흐름의 레이아웃에서 분리되어 페이지의 어느 곳에나 표시됩니다.

1.2 주요 값 ​​

①절대: 문서 흐름의 레이아웃을 벗어나 나머지 공간은 후속 요소로 채워집니다. 위치 지정의 시작 위치는 가장 가까운 상위 요소입니다(위치는 정적이지 않음). 그렇지 않으면 본문 문서 자체입니다.

②상대적: 상대 위치 지정; 문서 흐름의 레이아웃에서 벗어나지 않고 자체 위치만 변경하며 문서 흐름의 원래 위치에 빈 영역을 남깁니다. 위치 지정의 시작 위치는 문서 흐름에서 이 요소의 원래 위치입니다.

③고정: 고정 위치. 절대값과 유사하지만 스크롤 막대가 움직일 때 위치가 변경되지 않습니다.

④static: 기본값, 기본 레이아웃.

1.3 보조 속성

위치 속성은 문서 흐름에서 요소를 가져오는 역할만 합니다. 이 요소를 원하는 위치에 표시하려면 다음 속성(위치)을 사용해야 합니다. :static은 이를 지원하지 않습니다.):

①left: 요소 왼쪽에 삽입할 픽셀 수와 요소를 오른쪽으로 이동할 픽셀 수를 나타냅니다.

②right: 요소 오른쪽에 삽입할 픽셀 수와 요소를 왼쪽으로 이동할 픽셀 수를 나타냅니다.

③top: 요소 위에 삽입할 픽셀 수와 요소를 아래로 이동할 픽셀 수를 나타냅니다.

IV하단: 요소 아래에 삽입할 픽셀 수와 요소를 위로 이동할 픽셀 수를 나타냅니다.

위 속성의 값은 음수(단위: px)일 수 있습니다.

위치:절대

문서 흐름의 레이아웃 중 나머지 공간은 후속 요소로 채워집니다. 위치 지정의 시작 위치는 가장 가까운 상위 요소입니다(위치는 정적이지 않음). 그렇지 않으면 본문 문서 자체입니다. position:relative

position:relative

상대 위치 지정은 문서 흐름의 레이아웃을 벗어나지 않으며 자체 위치만 변경하고 공백을 남깁니다. 문서 흐름의 원래 위치. 위치 지정의 시작 위치는 문서 흐름에서 이 요소의 원래 위치입니다.

위치:고정

고정 위치 지정. 절대값과 유사하지만 스크롤 막대가 움직일 때 위치가 변경되지 않습니다.

실용적 적용:

①로그인 상자 오버레이: dz 포럼의 로그인과 같은 것입니다.

②허위 QQ 메시지 광고.

위치:정적

기본 위치 지정은 이 요소가 기본 위치 지정 방법임을 의미합니다.

실용적 적용:

IE6용 특수 처리.

스크롤바 표시 여부

position 속성을 포함하는 요소가 edge 요소인 경우:

①절대 및 상대: 이 두 값을 포함하는 경우 가장자리 요소, 이 요소가 표시되지 않도록 브라우저를 축소하면 스크롤 막대가 나타납니다.

②고정: 이 값을 포함하는 가장자리 요소의 경우 브라우저가 이 요소가 보이지 않는 지점까지 축소되면 스크롤 막대가 나타나지 않습니다.