CSS 위치에 대한 자세한 설명

글꼴, 텍스트, 배경 등과 같은 CSS의 다른 많은 속성은 대부분 이해하기 쉽습니다. 일부 CSS 책에서는 이러한 간단한 속성을 대대적으로 소개하지만 몇 가지 어려운 속성에 대한 설명을 무시합니다. 이는 중요한 것을 피하고 쉬운 것을 취하는 것으로 의심됩니다. 이해하기 어려운 CSS의 주요 속성에는 상자 구조와 위치 지정이 포함됩니다. 포지션이 전부인 것처럼, 이 글에서는 포지션에 대한 이해를 주로 다룰 것이며, 이 글을 읽고 나면 포지션에 대한 가장 포괄적인 이해를 제공하기 위해 노력할 것입니다.

위치의 4가지 속성값:

1. 상대

2. 절대

3. fixed

4. static

4가지 속성은 아래에 설명되어 있습니다.

 

sub1

 

sub2

1.relative

relative 속성은 비교적 간단합니다. 답은 그 위치에 있습니다. 위 코드에서 sub1과 sub2는 형제 관계에 있습니다. 예를 들어 sub1의 상대 속성을 설정하는 경우 다음 CSS 코드를 설정합니다.

#sub1
{
위치: 상대 ;
padding: 5px;
top: 5px;
left: 5px;
}

relative 속성이 설정되지 않은 경우 이렇게 이해할 수 있습니다. sub1의 위치는 일반적인 문서 흐름을 따르므로 특정 위치에 있어야 합니다. 하지만 sub1의 위치를 ​​상대값으로 설정하면 위쪽, 오른쪽, 아래쪽, 왼쪽 값에 따라 예상 위치에 따라 오프셋됩니다. 상대의 "상대적" 의미도 여기에 반영됩니다. .

이를 위해서는 상대값을 설정하지 않을 경우 sub1이 어디에 있어야 하는지 기억하고 일단 설정되면 있어야 할 위치에 따라 오프셋하면 됩니다.

다음 질문은 sub2의 위치가 어디인가요? 대답은 sub1이 위치 속성을 추가하기 때문에 이전 위치와 현재 위치가 변경되지 않는다는 것입니다.

이때 sub2의 위치도 상대값으로 설정하면 어떻게 되나요? 이때도 여전히 sub1과 동일하며 원래 위치에 따라 오프셋됩니다.

상대 오프셋은 개체 여백의 왼쪽 상단을 기준으로 합니다.

2. 절대

이 속성은 항상 오해의 소지가 있습니다. position 속성을 절대값으로 설정하면 항상 브라우저 창에 따라 위치가 정해진다고 하는데 이는 사실 잘못된 것입니다. 사실 이는 고정된 속성의 특징입니다.

sub1의 위치를 ​​절대값으로 설정하면 오프셋 대상으로 누구를 사용하나요? 여기에는 두 가지 상황이 있습니다.

(1) sub1의 부모 객체(또는 부모 객체인 경우 증조할아버지) parent도 position 속성을 설정하고 position의 속성 값은 다음과 같습니다. 절대 또는 상대, 즉 기본값이 아닌 경우 sub1은 이 상위 항목에 따라 위치가 지정됩니다.

객체가 결정되었더라도 주의가 필요한 몇 가지 세부 사항이 있다는 점에 유의하세요. 즉, 객체를 배치하는 데 부모의 어느 위치 지정 지점을 사용해야 할까요? 부모가 여백, 테두리, 안쪽 여백 등과 같은 속성을 설정하는 경우 이 위치 지정 지점은 안쪽 여백을 무시하고 안쪽 여백의 시작 부분부터 위치가 지정됩니다(즉, 안쪽 여백의 왼쪽 상단부터 시작). 이는 우리가 당연하게 여기는 여백의 왼쪽 상단 위치에 대한 아이디어가 다릅니다.

다음 질문은 sub2의 위치가 어디인가요? position이 절대값으로 설정되면 sub1이 마치 sub1에 속하지 않는 것처럼 일반적인 문서 흐름을 오버플로하게 되기 때문입니다. 부모와 마찬가지로 DreamWeaver에서는 "레이어"라고 부르지만 실제로는 같은 의미입니다. 이 시점에서 sub2는 sub1의 위치를 ​​얻게 되며 해당 문서 흐름은 더 이상 sub1을 기반으로 하지 않습니다. sub1이지만 상위 항목에서 직접 시작됩니다.

(2) sub1에 위치 속성이 있는 상위 개체가 없으면 본문이 위치 지정 개체로 사용되며 브라우저 창에 따라 위치가 지정됩니다.

3.fixed

fixed는 특별한 절대값입니다. 즉,fixed는 항상 본문을 위치 지정 개체로 사용하여 브라우저 창에 따라 위치를 지정합니다.

4. static

위치의 기본값입니다. 일반적으로 위치 속성이 설정되지 않은 경우 일반적인 문서 흐름에 따라 정렬됩니다.

이 글에 기술적인 문제나 표현상의 문제가 있는 경우 메시지를 남겨주세요. 읽어주셔서 감사합니다!

CSS Position에 대한 자세한 설명과 관련 글은 PHP 중국어 홈페이지를 참고해주세요!