CSS의 위치 속성에 대해 자세히 알아보기

내가 프론트엔드 지식을 작성하는 것을 지켜보는 프로그래머들도 나와 같은 느낌을 받을지 모르겠다. html 구조 작성을 마치고 CSS 스타일 콘텐츠를 작성할 때마다 나는 어떤 느낌을 받는다. 마음에 들지만 구현 후에는 ctrl+save가 정말 달라서 정말 기분이 좋지 않습니다.
위치의 속성에 대해서는 설정할 때마다 다소 놀란다.
두세 번 인터뷰를 했는데 이런 질문을 받지 않아서 그래도 운이 좋았습니다.

• 위치
  이 속성에는 총 4개의 값이 있습니다.

• 정적 정적위치
  기본 레이아웃입니다. 블록 수준 요소인 경우 페이지의 위에서 아래로 쌓입니다. 인라인 요소인 경우 한 줄에서 왼쪽에서 오른쪽으로 계속됩니다. 맞지 않으면 다른 줄로 넘어갑니다.

• 상대 위치 지정
  은 문서의 원래 위치를 기준으로 요소의 위치를 ​​지정합니다. top, left, bottom, left의 4가지 속성값을 통해 위치를 변경합니다.
  위 내용은 이해하기 쉽습니다.
  “ 여기서 이해하기 어렵습니다. 요소의 상대 위치 지정은 요소가 원래 차지했던 문서 흐름 공간을 유지합니다. 예를 들어 top: 20px는 요소를 만듭니다. distance는 원래 차지했던 공간의 상단에서 20px입니다. 즉, 요소가 20px 아래로 이동했지만 특정 거리만큼 이동한 요소 외에는 페이지의 다른 요소가 변경되지 않았습니다. 🎜> 절대

  절대 위치 지정
• 절대 위치 지정은 문서 흐름에서 완전히 제거되며, 이전에 요소가 차지했던 공간도 재활용됩니다. 절대 위치 지정 요소는 위치 지정 컨텍스트에 따라 위치가 지정됩니다.

  절대 위치 지정은 인라인 요소를 블록 수준 요소로 변환할 수 있다는 점에 유의해야 합니다. 그러나 확실한 것은 인라인 요소가 절대 위치에 있으면 요소의 위치를 ​​파악하기 어렵다는 것입니다. (이유: 요소에 내부 여백 이 설정되어 있지 않고 이전에 절대 위치가 지정된 요소가 없는 경우, 이후, 왼쪽, 오른쪽 요소는 일시적으로 원래 위치에 유지되지만 요소에 여백이 설정된 경우 해당 요소는 일시적으로 원래 위치에서 떨어진 위쪽 요소를 찾습니다. 절대 위치 지정이 아닙니다.) 따라서 절대 위치 지정을 설정한 경우 요소의 상단과 왼쪽을 즉시 위치 지정해야 합니다.
  
  위치 지정 컨텍스트 이해: 다른 요소를 기준으로 위치 지정 요소의 위치를 ​​이동하면 "다른 요소"가 해당 요소의 위치 지정 컨텍스트입니다.

  절대 위치에 있는 요소의 모든 상위 요소는 해당 위치 지정 컨텍스트가 될 수 있습니다. 해당 상위 요소를 position:relative;로 설정하면 됩니다.

  상대 요소 중 상대 위치 지정이 설정되지 않은 경우 절대 요소의 기본 위치 지정 컨텍스트는 본문입니다.

  
  
  
  

  고정 고정 위치

  절대 위치도 문서 흐름을 완전히 제거합니다. 그러나 위치 지정 컨텍스트는 브라우저 창인 뷰포트입니다.
고정 위치 지정은 일반적으로 사용되지 않습니다. 가장 일반적인 경우는 웹 페이지 스크롤에 따라 움직이지 않는
• 내비게이션

  을 만드는 것입니다.
  
  

  연습을 할 때 가장 익숙한 것은 부모 요소를 상대적으로 배치한 다음, 배치해야 할 자식 요소를 절대 위치시키는 것입니다.
일부 웹 페이지에는 상위 요소가 절대 위치에 있고 하위 요소가 상위 요소를 기준으로 절대 위치가 지정되어 있지만 상위 요소의 위치를 ​​다시 지정해야 하기 때문에 이런 방식으로 작성하는 것을 좋아하지 않습니다.

[관련 추천]

1.

무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

위 내용은 CSS의 위치 속성에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!