CSS 포지셔닝 (위치)

이전 : CSS 디스플레이 (디스플레이) 및 가시성 (가시성)

다음 : CSS 플로트 (부동)

위치 때로는 매우 까다로운!

요소의 전면에 표시하기로 결정!

요소는 겹칠 수 있습니다!

포지셔닝 (위치)

CSS 위치 속성은 요소를 찾을 수 있습니다. 또한 뒤에 다른 요소의 요소 수, 및 원소 함량이 발생해야하는지, 너무 많으면 지정할 수있다.

요소는, 상하에 사용 좌우 위치 속성 수있다. 위치 속성이 먼저 설정되어 있지 않으면 그러나 이러한 특성은 작동하지 않습니다. 또한 위치 결정 방법에 따라 작동하는 다른 방법이있다.

네 개의 다른 위치 결정 방법이있다.

정적 위치

위치하지 않은 기본 HTML 요소, 요소는 정상 스트림에서 나타난다.

고정 위치 요소는 위, 아래, 왼쪽, 오른쪽 영향되지 않습니다.

고정 위치

브라우저 창 요소의 상대적인 위치가 고정 된 위치이다.

경우에도 윈도우가 이동하지 않습니다를 굴러 :

예

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

»시도

참고 : 고정 IE7의 위치와 IE8 설명 DOCTYPE 지원해야!

위치의 고정 위치는 공간을 차지하지 않습니다 때문에 문서 요소의 흐름과는 무관합니다.

고정 배치 요소 및 다른 요소가 중첩된다.

상대 위치

상대 위치 요소는 정상 위치에 대하여 배치된다.

예

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

»시도

콘텐츠 요소와 중복 요소의 상대적 위치를 이동할 수 있습니다, 그것은 점유 원래의 공간을 변경하지 않습니다.

예

h2.pos_top
{
position:relative;
top:-50px;
}

»시도

상대 위치 소자는 종종 용기 블록 절대 위치 요소로서 사용된다.

절대 위치

가장 가까운 위치 지정된 부모 요소에 대해 요소의 위치를 절대 위치, 소자 이미 부모 요소에 위치하지 않은 경우에 대한 상대적인 위치는 <HTML>

예

h2
{
position:absolute;
left:100px;
top:150px;
}

»시도

따라서 유동 무관 한 문서 요소의 위치가 공간을 차지하지 않도록 절대 위치.

절대 위치 요소와 다른 요소가 중첩된다.

중복 요소

방향은 문서 요소의 독립적 인 흐름과, 그래서 그들은 페이지의 다른 요소를 커버 할 수있다

Z- 인덱스 속성 (요소 뒤의 앞에 배치 또는한다) 요소의 겹침 순서를 지정합니다

요소의 양 또는 음의 적층 순서를 가질 수있다 :

예

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

»시도

요소는 높은 적층 순서는 요소의 낮은 스택 순서의 앞에 항상 있습니다.

참고 :이 위치 요소가 겹치는 경우 z를 지정하지 않은 - 인덱스를 HTML 코드의 요소의 최종 위치가 상단에 표시됩니다.

더 많은 예제

요소를 절단 모양

이 예는 요소의 모양을 설정하는 방법을 보여줍니다. 요소는이 모양으로 가위 차기로되어 표시됩니다.

어떻게 내부 요소 오버 플로우의 내용을 표시하는 스크롤 막대를 사용하는

이 예에서는 지정된 영역에서 요소의 내용을 수용 할 수 있도록 설정하는 방법, 너무 큰 경우, 스크롤 막대를 만들 수있는 오버 플로우 속성을 보여줍니다.

자동 오버 플로우를 처리 할 수있는 브라우저를 설정하는 방법

이 예는 자동으로 오버 플로우를 처리 할 수있는 브라우저를 설정하는 방법을 보여줍니다.

변경 커서

이 예는 커서를 변경하는 방법을 보여줍니다.

전체 CSS 위치의 호텔

"CSS"열 수 CSS (CSS1 또는 CSS2) 속성의 정의의 버전을 나타냅니다.

재산	설명	값	CSS
바닥	아래의 국경에서 그 용기 블럭 외부의 낮은 위치 요소 사이의 경계는 정의 오프셋.	자동 길이 % 상속	이
클립	클립 절대적으로 위치 요소	모양 자동 상속	이
커서	지정된 유형을 표시하기 위해 커서를 이동	URL 자동 십자선 디폴트 값 포인터 움직임 전자 크기 조정 NE-크기 조정 NW-크기 조정 N-크기 조정 자체 크기 조정 자상 한 크기 조정 의 크기 조정 w-크기 조정 본문 대기 도움	이
좌회전	그 함유의 왼쪽 가장자리 사이의 타겟팅 요소 왼쪽 여백 오프셋 블록 경계를 정의합니다.	자동 길이 % 상속	이
오버 플로우	원소의 함유량은 그 영역이 초과 할 때 발생하는 경우 설정.	자동 숨겨진 스크롤 눈에 보이는 상속	이
오버 플로우-Y	오버플 요소 컨텐츠 영역의 상부 / 하부 에지의 콘텐츠를 처리하는 방법을 지정	자동 숨겨진 스크롤 눈에 보이는 더 디스플레이 없다 어떤 콘텐츠가 없습니다	이
오버 플로우-X	어떻게 내용 요소 오버 플로우의 콘텐츠 영역의 오른쪽 / 왼쪽 가장자리에 처리하는 지정	자동 숨겨진 스크롤 눈에 보이는 더 디스플레이 없다 어떤 콘텐츠가 없습니다	이
위치	위치 결정 요소의 유형을 지정	절대 고정 된 상대적인 정적 인 상속	이
권리	그것은 그것의 경계와 블록 오른쪽 테두리 사이의 오프셋 오른쪽 여백을 포함 타겟팅 요소를 정의합니다.	자동 길이 % 상속	이
상단	그것은 경계에 위치 설정 요소를 정의하고, 블록 마진은 경계 사이의 오프셋을 포함.	자동 길이 % 상속	이
Z- 인덱스	요소의 적층 순서 설정	수 자동 상속	이