CSS에서 위치를 지정하는 네 가지 방법 요약

이 글에서는 CSS에서 position을 배치하는 네 가지 방법에 대해 설명합니다. 요약

1. static ; 정적 위치 지정(기본값 )

표준 문서 흐름의 모든 요소는 정적으로 위치 지정됩니다.

2 . positon:relative; 상대 위치 지정

표준 문서 흐름에서 벗어나지 않음, "집에 구멍을 내고 그림자를 분리"

특징 : 상대 위치 지정을 설정하고

상단, 왼쪽, 오른쪽, 하단속성을 설정하면 상자가 상자 안에 있음 원래 위치 오프셋

상대 위치 지정 사용: 일반적으로 "캡핑 효과"에 사용되지 않음, 두 가지 기능만 사용:

(1) 요소 미세 조정

(2)

절대 위치 지정, 자식 및 부모

에 대한 참조 왼쪽과 오른쪽을 사용하여 상자의 오른쪽과 왼쪽 오프셋을 설명할 수 있습니다.

position：relative；
top：10px;
left：10px;   //相对于原来位置向右下移10px

position：relative;
top:-10px;
left:-10px;   //相对于原来位置向左上移10px

위치:절대값의 하단 및 상단 설명. ; 절대 위치 지정

　

표준 문서 흐름 특징: (1) 이 요소에 상위 요소가 없으면 위쪽, 왼쪽, 오른쪽 및 하단은 앞으로 브라우저 창을 기준으로 위치가 지정됩니다

(2) 절대 위치에 있는 요소에 상위 요소가 있지만 상위 요소에 상대 위치가 없으면 위쪽, 왼쪽, 오른쪽, 아래쪽이 됩니다.

(3) 절대 위치에 있는 요소에 상위 요소가 있고 상위 요소가 위치(비정적)인 경우 절대 위치에 있는 요소의 오프셋 자신의 상위 요소를 기반으로 합니다

(4) 절대 위치 지정 후 요소는 페이지에서 위치를 차지하지 않습니다

위치:고정 위치

표준 문서 흐름에서 벗어남

고정 위치 지정의 목적: 페이지의 일부 작은 광고를 페이지의 고정 위치에 고정해야 함

정리: 앞으로 페이지 작성 시 가장 많이 사용하는 것은 절대 위치 지정이나 상대 위치 지정이 아닌 절대 위치 지정과 상대 위치 지정을 함께 사용하는 것입니다.

사양 : 하위 요소는 상위 요소와 동일해야 합니다. (하위 요소는 절대 위치 지정을 사용하고 상위 요소는 상대 위치 지정을 사용합니다.)

위 내용은 CSS에서 위치를 지정하는 네 가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!