포지션 포지셔닝은 사람들이 좋아하고 싫어하는 속성입니다.

CSS의 위치 속성은 사용하면 때로는 매우 강력할 때도 있고, 때로는 매우 무력할 때도 있습니다.

강력할 때 div의 일부 작은 개체에 마진이나 패딩을 사용하는 것이 불편한 경우 position:absolute를 부여한 다음 왼쪽, 오른쪽, 위쪽, 아래쪽을 장착하면 기본적으로 어디에든 넣을 수 있습니다. 당신이 원하는.

사람들이 무력감을 느끼는 이유는 위치 지정 속성을 남용하면 레이아웃이 하늘 위로 날아간다는 것입니다. 그리고 z-index가 제대로 설정되지 않기 때문에 기본적으로 전체 레이아웃이 손실됩니다. 손실이 발생하고 원인을 찾는 것이 매우 번거로워서 결국에는 허물고 다시 작업을 해야 할 것 같습니다.

그래서 위치 속성을 다룰 때에는 그 동작 원리와 적용 시나리오를 자세히 이해하여 사용하고자 할 때 원하는 효과를 얻을 수 있도록 완벽하게 구동할 수 있어야 합니다.

더 이상 고민하지 말고 바로 다음 단계로 넘어가겠습니다. 먼저 위치 개념에 대해 이야기해 보겠습니다.

position, Baidu를 검색해 보면 이 단어는 방향을 의미한다는 것을 알 수 있습니다. CSS에서는 위치 지정을 의미하며 속성 이름은 정적(기본 위치 지정)이라는 5가지 속성 값이 있습니다. ), 절대(절대 위치), 상대(상대 위치), 고정(고정 위치), 상속(상속 위치, 일반적으로 사용되지 않음) .

작성 규칙:

position:static|absolute|relative|fixed|inherit

각 속성값을 소개하겠습니다

1. 위치:정적(기본 위치 지정)

이름에서 알 수 있듯이 우리가 일반적으로 작성할 때 문서 흐름에서 각 div의 기본 레이아웃은 정적 속성 값입니다. 이는 div 또는 기타 요소가 문서 흐름에서 벗어나지 않도록 하며 다음의 원칙을 따릅니다. 레이아웃, 위에서 아래로 아래에서는 블록 수준 요소 줄 바꿈, 인라인 요소 줄 바꿈 안 함 등이 일반적인 원칙입니다. 따라서 위치 지정 속성을 사용하지 않으면 이 위치를 설정할 필요가 없습니다.

2. 위치 : 상대(상대 위치 지정)

상대 위치 지정은 문서 흐름에서 벗어나지 않는다는 의미입니다. 즉, 요소에 이 속성을 설정하면 파일이 문서 흐름에서 계속 앞뒤로 이동합니다. 이동하려면 아래에서 이에 대해 이야기하겠습니다.

3. 위치 : 절대(절대 위치 지정)

은 상대 위치 속성 을 갖는 상위 요소 를 기준으로 위치가 지정됩니다. 문서 흐름이 중단됩니다.

상위 요소의 모든 하위 요소가 절대값으로 설정되면 모든 하위 요소가 부동된 다음 함께 쌓이게 되므로 다양한 요소를 펼치고 표시하려면 이러한 요소를 이동하고 이동해야 합니다. 이러한 요소는 스타일 시트에 직접 4가지 속성(왼쪽, 오른쪽, 위쪽, 아래쪽)을 쓴 다음 속성 뒤에 px(픽셀), %(퍼센트) 및 거리를 표현할 수 있는 기타 단위를 쓰는 방법입니다.

여기서는 왼쪽과 오른쪽을 동시에 사용할 수 없고, 위쪽과 아래쪽을 동시에 사용할 수 없다는 점을 강조하고 싶습니다.

또한 이 네 가지 요소는 모두 상대 위치 지정(relative) 속성을 사용하여 상위 요소를 기준으로 이동됩니다. 상위 요소에 상대 위치 지정이 없으면 절대 위치 지정은 본문을 기준으로 합니다.

그러므로 설정한 요소가 이탈되는 것을 방지하기 위해 상위 요소를 기준으로 설정하는 것을 잊지 마세요.

4. 고정(고정 위치)

이 위치 지정은 브라우저 창을 기준으로 한 것이며 이동 방법은 상대 및 절대 위치 지정과 동일합니다.

또한 이 기능을 사용하여 일반적인 사이드바나 광고 이미지도 복사 흐름과 분리됩니다. 매우 실용적이고 강력한 기능.

　5. 상속(위치 상속) 은 상위 요소로부터 위치 위치 속성을 상속받는 방식으로, 많이 사용되지는 않습니다.

그러고보니 저희는 z-index (레벨) 문제에 관여하고 있습니다. 방금 말했듯이 절대값이 모든 하위 요소로 설정되면 모든 하위 요소가 함께 쌓여 서로를 덮게 됩니다.

하나의 요소에 여러 레이어를 쌓아야 하는 경우 정렬 방법. 이를 위해서는 z-index 속성을 사용해야 합니다.

Z-index 속성의 속성값은 숫자입니다. 숫자가 클수록 더 정확해집니다. 예를 들어

z-index=0인 요소는 z-index=1 아래에 표시되고, z-index=10은 z-index=8 위에 표시됩니다. 따라서 표시 순서를 스택하려면 z-index를 설정하세요. 그게 다야.

물론 z-index가 설정되지 않은 경우 기본적으로 이후 요소가 이전 요소를 덮습니다.

　 사용 시 주의사항:

1. float 속성은 position 속성과 공유될 수 없습니다. 기억하세요!

2. 절대값을 사용할 때는 상위 요소에 상대

3. 왼쪽, 위쪽 외에 오른쪽, 아래쪽도 있으니 유연하게 배워서 활용해보세요

4. 가능하면 위치를 사용하지 마세요. 결국 레이아웃이 엉망이 되기 쉽습니다.

5. Javascript에서 position을 호출하는 방법은 div.style.positio="absolute"와 비슷합니다. div는 변수 이름입니다.

위 내용은 포지션에 대한 기본적인 내용을 간략하게 설명한 것 뿐입니다. 여기서 원하시는 답변을 얻지 못하신 경우 아래에 메시지를 남겨주시면 적극적으로 답변해 드리겠습니다.

마지막으로 적극적으로 소통하며 함께 발전해 나가세요!