미루고 미뤄뒀던 .. position을 다시 배우러 왔읍니다 . .
먼저 position의 속성 static, relative, absolute, fixed, sticky에 대해서 배우고자 한다.
큰 <div>안에 9개의 <div>를 넣었고, 중심에는 노란색으로 칠해주었다. 그안에는 빨간색..
노란 값에 변화를 주며 position 속성에 대해 공부해보자.
- position : static
- position은 기본 값은 static이며, static 값일 경우 요소들의 흐름을 따르게 된다. 즉, 혼자 마구잡이로 아무데에 놓이지않고 자연스럽게 요소들의 흐름을 따른다는 것이다. 모든 요소들이 static일 경우 위와 같다.
- position: relative;
- position에 relative값을 주면, static이였을 경우에 놓여진 위치에 맞춰 이동이 가능하다. 현재 relative를 준 뒤, top: 50px; left: 50px;을 주었다. 마치 붕 떠서 움직이는 것과 같다.
- 주로.. 마우스 오버했을 때, 오버레이값을 주고싶을 때 적용했었던 것 같다. .
- relative는 abosolute의 속성과 다르게 부모의 position 속성에 영향을 받지 않는다. 현재 자신이 원래 있어야할 위치를 생각하면 된다.
- position: absolute;
- postition: absolute 값을 주게 되면, 요소들의 흐름에서 제거된다.
- top 과 left에 50px씩 주었는데, 움직이는 기준은 static이 적용되지 않은 가장 가까운 부모 요소가 기준이 된다. 위의 사진은 선이 그려진 <div>에 relative를 주었다.
- 예시로 바로 위 부모가 relative라면 그럼 그 부모가 기준이 된다.
- 바로 위 부모들이 static이라면 가장 윗 부분 body 태그가 기준이 된다.
- position: fixed;
- position fixed는 뷰포트를 기준으로 한다.
- 스크롤 바를 내려도 위치가 고정되어 있다. 주로 fixed는 계속 떠있을 버튼이나 로고에 편하게 쓰일 수 있다.
- position: stikcy;
- sticky는 원래 자신이 있어야할 위치부터 시작되고, 스크로를 내리면 정해준 값으로 계속 공백을 유지하며 밀려나는 모습을 볼 수 있다. 이런 기능은 주로 상단바의 기능으로 구현해낼 수 있다. 현재 위에는 100px을 주었다.
- sticky는 항상 부모요소에 줄 수 있도록 한다. 아니면 자식요소와 같이 값을 주어야한다. 아니면 아래처럼됨.
자식 요소에만 10px, sticky를 주니까 부모요소가 끝나는 시점에 끝나버린다. 따라서 자식요소를 안고 있는 부모요소에 값을 주어야한다.