relative2 [CSS] - position (static, relative, absolute) 이해하기 - 2탄 fixed fixed 속성값은 absolute 와 같이 흐름에 상관없이 아무 위치나 좌표로 설정이 가능합니다. 단. 기준점은 부모 또는 조상 객체가 아닌 브라우저를 기준으로 하여 하위에 속해 있어도 영향을 받지 않습니다. (무조건 브라우저 창 기준점을 기준으로 한다.) See the Pen fixed by solutiona80 (@solutiona80) on CodePen. 예제를 보면 파란색 배경의 div가 fixed로 설정되어있습니다. 마우스 휠을 돌려서 스크롤을 이동시켜도 파란색 배경의 div는 고정으로 변하지 않습니다. css를 보면 .content에서 top 15px를 주어서 파란색 박스와 겹치지 않게 아래로 이동 시켜 놓았고 이때 position이 기본인 static인 상태라면 top 속성이 .. 2022. 2. 16. [CSS] - position (static, relative, absolute) 이해하기 - 1탄 CSS의 position 란 css의 position은 객체를 레이아웃에 배치하거나 위치시킬 때 사용되는 속성입니다. 종류는 position: static | relative | absolute | fixed | sticky가 있습니다. static 요소를 문서 순서에 맞추어 배치. relative 주로 부모 요소와 연결하여 위치를 지정. absolute 원하는 위치지 지정. fixed 지정된 위치에 고정. sticky static과 fixed 속성의 특징을 모두 가지고 있음. sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static이며 도달 이후에는 fixed처럼 행동. static 객체를 생성하면 초기값으로 static이 설정되어있습니다. 간단히 relative와 abso.. 2022. 2. 14. 이전 1 다음
