CSS의 위치 지정에 대한 간략한 소개(코드 예)

이 글의 내용은 CSS에서의 위치 지정에 대한 간략한 소개(코드 예제)입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 상대 위치 지정

위치: 상대
기본 레이아웃 위치를 기준으로 한 위치, 즉 있어야 할 위치를 기준으로 한 위치입니다.

.avatar {
  top: 3px; //从上到下偏移3px
  left: 7px; //从左到右偏移7px
  position: relative;
}

상대 위치 지정은 일반적인 문서 흐름에서 벗어나지 않으며 페이지의 다른 요소에서는 box2가 그대로 유지됩니다.

2. 절대 위치 지정

위치: 절대

.box {
position:absolute;
top:10px;//相对定位点，从上到下偏移10px
left:10px; //相对定位点，从左到右偏移10px
}

• 절대 위치 지정 요소는 일반적인 문서 흐름에서 벗어나 다른 요소는 이를 볼 수 없습니다. 절대 위치에 있는 요소도 표시되지 않습니다. 따라서 아래 그림의 두 box2는 겹칩니다

• 절대 위치 지정의 위치 지정 개체는 상위 요소에서 상대/고정/절대 항목이 있는지 확인하는 것입니다. 상위 요소가 상대/고정/절대로 설정된 경우 상위 요소는 절대 위치 요소의 앵커 포인트입니다. 상위 요소가 상대/고정/절대로 설정되지 않은 경우 본문과 html이 나올 때까지 계속 찾습니다. . 찾을 수 없는 경우 html 루트 노드가 앵커 포인트로 사용됩니다.

따라서 절대 위치 지정을 사용할 때는 상위 요소를 기준으로 상대 위치를 설정하는 것이 가장 좋습니다.

• 절대 위치 지정을 설정한 후에는 블록 수준 요소의 너비가 줄어들고 너비는 내용에 따라 결정됩니다. 인라인 요소는 너비, 높이, 내부 및 외부 여백을 설정할 수 있습니다.

3. z-index

z-index 상세 소개

1. z-index 정의:

속성은 요소의 스택 순서를 설정합니다. z 축의 위치인 z축은 디스플레이 영역에 수직으로 확장되는 축으로 정의됩니다. 양수이면 사용자에게 더 가까워지고, 음수이면 사용자에게서 멀어진다. 즉, 쌓인 순서가 높은 요소는 항상 쌓인 순서가 낮은 요소 앞에 옵니다.
참고: 요소는 음수 Z-색인 속성 값을 가질 수 있습니다.
참고: Z-색인은 위치가 지정된 요소(예: position:absolute;)에서만 작동합니다!

2. 발생하는 함정:

(1) 상위 요소는 하위 요소의 z-index 값에 관계없이 상위 요소보다 더 작은 z-index 값을 가질 수 있습니다. 요소.

(2) z-index 값이 auto이면 스태킹 컨텍스트를 형성하지 않습니다.

div3의 z-index를 다음과 같이 제거합니다. div3의 하위 요소 div4 및 div6은 div3과 동일한 레벨의 div1/div2와 직접 쌓입니다. demo

(3) 부모-자식 관계와 상자의 쌓인 순서에 영향을 주지 않고 부모-자식 관계의 Z-색인을 설정하는 방법. 하지만 부모 요소의 z-index를 설정하지 않고 자식 요소의 z-index 값을 음수로 설정하면 발견되었습니다. 상위 요소는 하위 요소를 직접 덮어씁니다.
아래와 같이 box1에는 z-index가 설정되어 있지 않으며, 툴팁의 z-index가 음수로 설정되어 있습니다. Box1은 툴팁을 가리고 있습니다.
데모 링크 링크 설명은 현재 만족스럽지 못하며 추후 수정될 예정입니다.

4. 고정 위치

위치: 고정
브라우저 창을 기준으로 위치가 지정됩니다. 따라서 스크롤이 발생하면 고정 위치 지정 요소는 여전히 창의 고정 위치에 있습니다.
예를 들어 브라우저 오른쪽의 맨 위로 돌아가기 버튼은 고정된 위치에 있습니다.

아아아아

위 내용은 CSS의 위치 지정에 대한 간략한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!