position 속성은 요소 (정적, 상대적, 고정 또는 절대)에 사용되는 위치 결정 방법의 유형을 지정합니다.
위치 속성
position 속성은 요소에 사용될 위치 확인 방법의 타입을 지정한다.
네 개의 다른 위치 값이 있습니다 :
-
static -
relative -
fixed -
absolute
요소는 그 상하 좌우 등록 정보를 사용하여 위치된다. 않는 한, 이러한 속성이 작동하지 않습니다 position 속성이 먼저 설정되어 있습니다. 또한 위치 값에 따라 다르게 작동한다.
position: static;
HTML 요소는 기본적으로 정적 위치한다.
고정 위치 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않습니다.
인 요소 position: static; 어떤 특별한 방법으로 배치되지 않고, 이것은 항상 페이지의 정상적인 흐름에 따라 배치된다 :
여기에 사용되는 CSS는 다음과 같습니다
position: relative;
인 요소 position: relative; 정상 위치에 상대적으로 배치된다.
상단, 오른쪽, 하단, 그리고 상대적으로 위치 요소의 왼쪽 속성을 설정하면이 떨어져 정상 위치에서 조정하게됩니다. 다른 내용은 요소에 의해 남아있는 틈에 맞게 조정되지 않습니다.
여기에 사용되는 CSS는 다음과 같습니다
position: fixed;
인 요소 position: fixed; 항상 의미 페이지가 스크롤되는 경우에도 같은 장소에 남아 뷰포트에 상대적인 위치한다. 상단은, 오른쪽, 아래쪽, 왼쪽 및 속성은 요소를 배치하는 데 사용됩니다.
고정 된 요소가 정상적으로 위치되었을 페이지에 간격을 두지 않습니다.
페이지의 오른쪽 아래 모서리에있는 고정 요소를 알 수 있습니다. 여기에 사용되는 CSS는 다음과 같습니다
예
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} »그것을 자신을 시도 position: absolute;
인 요소 position: absolute; 가장 가까운 위치 조상에 상대적 위치 (대신 뷰포트에 위치 상대의 같은 고정).
하나; 절대 위치 지정된 요소가 더 배치 조상이없는 경우, 상기 문서 체를 사용하고, 페이지 스크롤링과 함께 이동한다.
참고 : "positioned" 요소는 그 위치를 제외하고 아무것도 하나입니다 static .
다음은 간단한 예입니다 :
여기에 사용되는 CSS는 다음과 같습니다
예
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
»그것을 자신을 시도 중복 요소
소자가 위치 될 때, 다른 요소에 겹쳐있다.
z-index 속성 (요소 뒤에 앞에 배치, 또는해야 다른 사람) 요소의 스택 순서를 지정합니다.
요소는 양 또는 음의 적층 순서를 가질 수있다 :
이 제목입니다
이미지가 -1의 Z- 인덱스를 가지고 있기 때문에, 그것은 텍스트 뒤에 배치됩니다.
큰 스택 순서 요소는 낮은 스택 순서 요소의 앞에 항상.
 | 참고 :이 위치 요소가없이 겹치는 경우 z-index 지정 상단에 표시되는 HTML 코드에서 마지막 위치하는 요소입니다. |
|---|
이미지에서 위치 텍스트
이미지 위에 텍스트를 배치하는 방법 :
예
그것을 자신을 시도 :
맨 왼쪽» 오른쪽 상단» 왼쪽 아래» 오른쪽 아래» 중심»
더 예
소자의 형상을 설정
이 예는 요소의 모양을 설정하는 방법을 보여줍니다. 요소는이 모양으로 가위 차기로되어 표시됩니다.
스크롤을 사용하여 요소에 오버 플로우를 표시하는 방법
이 예제에서는 요소의 내용이 지정된 영역에 맞게 너무 큰 경우 스크롤 막대를 만들려면 오버 플로우 속성을 설정하는 방법을 보여줍니다.
자동 오버 플로우를 처리 할 수있는 브라우저를 설정하는 방법
이 예는 자동으로 오버 플로우를 처리 할 수있는 브라우저를 설정하는 방법을 보여줍니다.
커서를 변경
이 예는 커서를 변경하는 방법을 보여줍니다.
연습으로 자신을 테스트!
모든 CSS의 위치 등록
| 재산 | 기술 |
|---|---|
| bottom | 위치 지정 상자 아래쪽 마진 모서리를 설정합니다 |
| clip | 클립 절대적 위치 요소 |
| cursor | 커서의 유형을 표시 할 지정 |
| left | 위치 지정 상자 왼쪽 마진 모서리를 설정합니다 |
| overflow | 내용 요소의 상자를 오버 플로우하는 경우 수행되는 작업을 지정합니다 |
| overflow-x | 이 요소의 컨텐츠 영역을 오버 플로우하는 경우 내용의 왼쪽 / 오른쪽 가장자리로 무엇을 지정합니다 |
| overflow-y | 이 요소의 컨텐츠 영역을 오버 플로우하는 경우 콘텐츠의 위 / 아래 가장자리 무엇을 지정합니다 |
| position | 요소의 위치의 유형을 지정 |
| right | 위치 지정 상자 오른쪽 마진 모서리를 설정합니다 |
| top | 위치 지정 상자 위쪽 여백 가장자리를 설정합니다 |
| z-index | 요소의 적층 순서를 설정 |