분류 css

CSS Position : 좋은 개발자에게 필요한 모든 것

컨텐츠 정보

  • 조회 316 (작성일 )

본문

CSS는 프론트엔드 개발에서 매우 중요합니다. CSS는 웹사이트를 아름답거나 끔찍하게 만들 수 있습니다. 

CSS 위치(Position)는 가장 중요한 속성입니다. 위치 속성은 요소의 위치를 ​​지정하는 데 사용됩니다.

  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

1. Static 


position: static; 


이것은 요소의 기본값입니다. 요소는 문서의 정상적인 흐름에 따라 배치됩니다. left, top, right, bottom 및 z-index와 같은 속성은 위치가 정적인 요소에 영향을 미치지 않습니다.


Group 18 


2. Relative 


position: relative; 


위치가 상대적인 요소는 문서의 정상적인 흐름에 남아 있습니다. 그리고 left, top, right, bottom 및 z-index와 같은 속성은 요소의 위치에 영향을 줍니다.


Group 19 


3. Absolute 


position: absolute; 


position: absolute가 있는 요소는 상위 요소를 기준으로 배치됩니다. 다른 요소는 해당 요소가 문서에 없는 것처럼 작동합니다. left, top, bottom 및 right 값은 요소의 최종 위치를 결정합니다.


Group 20 


4. Fixed 


position: fixed; 


고정 위치는 절대 위치와 동일합니다. 주목해야 할 유일한 것은 고정 요소는 스크롤의 영향을 받지 않는다는 것입니다. 그들은 항상 화면에서 같은 위치에 유지됩니다.


Untitled design 


5. Sticky 


position: sticky; 


position:sticky는 position: relative와 position: fixed를 혼합한 것입니다. 특정 스크롤 지점까지 상대적으로 위치가 지정된 요소처럼 작동한 다음 고정된 요소처럼 작동합니다. 그리고 요소에 위, 왼쪽, 아래, 오른쪽 값 중 하나를 지정해야 합니다.


Untitled design (1) 


https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh