CSS 위치 지정 구문 적용에 대한 자세한 설명

1. CSS 위치 지정: 위치

구문:

위치: 정적 | 절대 | 상대

정적: 기본값 . 특별한 위치 지정은 없으며 개체는 HTML 위치 지정 규칙을 따릅니다.

절대: 문서 흐름 밖으로 개체를 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 위치 지정 설정이 가장 많은 가장 가까운 상위 개체를 기준으로 절대 위치 지정을 수행합니다. 그러한 상위 개체가 없으면 본문 개체가 사용됩니다. 그리고 그 계단식은 z-index 속성을 통해 정의됩니다.

수정됨 : 지원되지 않습니다. 객체 위치 지정은 절대 방법을 따릅니다. 그러나 따라야 할 몇 가지 규범이 있습니다.

상대: 개체는 쌓일 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다.

설명: 객체의 위치 지정 방법을 검색합니다.

이 속성 값을 절대값으로 설정하면 주변 콘텐츠의 레이아웃에 관계없이 개체가 일반 문서 흐름에서 완전히 벗어나 배치됩니다. 다른 Z-인덱스 속성을 가진 다른 개체가 이미 특정 위치를 점유하고 있는 경우 서로 영향을 미치지 않으며 동일한 위치에서 겹칩니다. 이때 개체에는 외부 패치(margin)가 없지만 내부 패치(padding)와 테두리(border)가 있습니다.

객체의 절대 위치 지정을 활성화하려면 왼쪽, 오른쪽, 위쪽, 아래쪽 속성 중 하나 이상을 지정하고 이 속성의 값을 절대값으로 설정해야 합니다. 그렇지 않으면 위 속성은 기본값인 auto 를 사용하여 객체가 일반적인 HTML 레이아웃 규칙을 따르고 이전 객체 바로 다음에 렌더링되도록 합니다.

이 속성 값을 상대값으로 설정하면 개체가 일반 HTML 흐름으로 유지되지만 위치는 이전 개체를 기준으로 오프셋될 수 있습니다. 상대적으로 배치된 객체를 따르는 텍스트나 객체는 배치된 객체의 자연스러운 공간을 덮어쓰지 않고 자체 공간을 차지합니다. 대조적으로, 절대적 위치에 있는 개체 뒤에 오는 텍스트나 개체는 위치가 지정된 개체가 일반 문서 흐름 밖으로 드래그될 때까지 자연스러운 공간을 차지합니다. 절대 위치에 있는 개체를 가시 영역 외부에 배치하면 스크롤 막대가 나타납니다. 그러나 상대적으로 위치가 지정된 개체가 가시 영역 외부에 배치되면 스크롤 막대가 나타나지 않습니다.

콘텐츠의 크기는 레이아웃에 따라 개체의 크기를 결정합니다. 예를 들어 div 개체의 높이 및 위치 속성을 설정하면 div 개체의 내용에 따라 너비가 결정됩니다.

이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 position 입니다.

예:

div { position:relative; top:-3px }

2. CSS 위치 지정: Z-index

구문:

z-index: 자동 | 숫자

값:

자동: 기본값. 상위 개체의 위치를 ​​따릅니다.

설명:

개체의 스택 순서를 검색하거나 설정합니다.

숫자 값이 큰 개체는 숫자 값이 작은 개체에 중첩됩니다. 절대 위치에 있는 두 객체가 이 속성에 대해 동일한 숫자 값을 갖는 경우 HTML 문서에 선언된 순서에 따라 스택됩니다. 이 속성이 지정되지 않은 절대 위치 객체의 경우 이 속성에 대해 양수 값을 갖는 객체는 그 위에 있고 음수 값을 가진 객체는 그 아래에 있습니다. 매개변수를 null로 설정하면 이 속성이 제거됩니다.

이 속성은 위치 속성 값이 상대적이거나 절대적인 객체에만 작동합니다. 이 속성은 개체 선택과 같은 창 컨트롤에 영향을 주지 않습니다. IE5.5+에서는 iframe 객체가 이 속성을 지원하기 시작합니다. 이전 브라우저 버전에서는 iframe 개체가 창 컨트롤이었으며 이 속성은 무시되었습니다. 이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 zIndex 입니다.

예:

div { position:absolute; z-index:3; width:6px; }

3. CSS 위치 지정: top

구문 ：

위쪽: 자동 | 길이

값:

자동: 기본값입니다. 특별한 위치 지정은 없으며 HTML 위치 지정 규칙에 따라 문서 흐름에 할당됩니다.

length : 부동 소수점 숫자와 단위 식별자 Percent로 구성된 길이 값입니다. 이 값이 적용되려면 위치 속성 값을 절대 또는 상대로 정의해야 합니다.

설명:

위치 설정이 있는 가장 최근 상위 개체의 위쪽 가장자리를 기준으로 개체의 위치를 ​​검색하거나 설정합니다.

이 속성은 객체의 위치 속성이 설정된 경우에만 사용할 수 있습니다. 그렇지 않으면 이 속성 설정이 무시됩니다. 이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 top 입니다. 해당 값은 문자열이므로 스크립트 계산에 사용할 수 없습니다. 스타일 객체의 posTop, pixelTop 등의 런타임 속성과 객체의 offsetTop 및 기타 속성을 사용하시기 바랍니다.

예:

다음은 인용문입니다.

div { 위치: top:-3px; :6px }

문법:

　오른쪽: 자동 | 길이

　값:

　자동: 기본값. 특별한 위치 지정은 없으며 HTML 위치 지정 규칙에 따라 문서 흐름에 할당됩니다.

length : 부동 소수점 숫자와 단위 식별자 Percent로 구성된 길이 값입니다. 이 값이 적용되려면 위치 속성 값을 절대 또는 상대로 정의해야 합니다.

설명:

위치 설정을 사용하여 가장 최근 상위 개체의 오른쪽을 기준으로 개체의 위치를 ​​검색하거나 설정합니다.

이 속성은 객체의 위치 속성이 설정된 경우에만 사용할 수 있습니다. 그렇지 않으면 이 속성 설정이 무시됩니다. 이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 right 입니다. 해당 값은 문자열이므로 스크립트 계산에 사용할 수 없습니다. 스타일 객체의 posRight, pixelRight 등의 런타임 속성을 사용해 주세요.

예:

다음은 인용문입니다:
div { position: abstract: 1in }
div { position: top:-3px; :6px }

5. CSS 위치 지정: 하단

구문:

하단: 자동 | 길이

값:

자동: 기본값. 특별한 위치 지정은 없으며 HTML 위치 지정 규칙에 따라 문서 흐름에 할당됩니다.

길이: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값 | 이 값이 적용되려면 위치 속성 값을 절대 또는 상대로 정의해야 합니다.

설명:

위치 설정을 사용하여 가장 최근 상위 개체의 아래쪽 가장자리를 기준으로 개체의 위치를 ​​검색하거나 설정합니다. 이 속성은 객체의 위치 속성이 설정된 경우에만 사용할 수 있습니다. 그렇지 않으면 이 속성 설정이 무시됩니다. 이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 Bottom 입니다. 해당 값은 문자열이므로 스크립트 계산에 사용할 수 없습니다. 스타일 객체의 posBottom, pixelBottom 등의 런타임 속성을 사용해 주세요.

예:

다음은 인용문입니다:
div { position: Absolute; Bottom: 1in; 🎜>

구문:

왼쪽: 자동 | 길이

값:

자동: 기본값 값 . 특별한 위치 지정은 없으며 HTML 위치 지정 규칙에 따라 문서 흐름에 할당됩니다.

length : 부동 소수점 숫자와 단위 식별자 Percent로 구성된 길이 값입니다. 이 값이 적용되려면 위치 속성 값을 절대 또는 상대로 정의해야 합니다.

설명:

위치 설정이 있는 가장 최근 상위 개체의 왼쪽을 기준으로 개체의 위치를 ​​검색하거나 설정합니다.

이 속성은 객체의 위치 속성이 설정된 경우에만 사용할 수 있습니다. 그렇지 않으면 이 속성 설정이 무시됩니다. 이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다. 해당 스크립트 속성은 left 입니다. 해당 값은 문자열이므로 스크립트 계산에 사용할 수 없습니다. 스타일 객체의 posLeft, pixelLeft 등의 런타임 속성과 객체의 offsetLeft 및 기타 속성을 사용하세요.

예:

다음은 인용문입니다.

div { 위치: top:-3px; :6px }

위 내용은 CSS 포지셔닝 구문 적용에 대한 자세한 설명입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!