position: absolute , relative에 대해서
[css] position (relative,absolute)
position 속성을 통해 문서상에 요소를 배치하는 방법을 지정한다
top,right,bottom,left 속성을 통해 요소의 최종 위치를 결정한다
사용법.
1.기준을 잡는다 ex) position: relative;
2. 이동시킨다 ex) top:50px;
block
inline
block: 한줄 모두 차지
inline: 콘첸츠 크기만큼만 차지
position 속성
요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다
static: 기준없음
relative: 요소 가지 자신을 기준으로 배치
absolute: 부모 요소를 기준으로 배치
https://blog.naver.com/tkdgus830416/70173677850
position에는 3가지 속성이 있다.
relative, absolute, fixed 이 세가지 속성 중 2가지 relative, absolute를 다뤄보겠다.
relative : absolute를 쓸 때 영역을 잡아주는 역할
absolute : left, top, right, bottom 값으로 전 화면을 아무런 제약 없이 쓸 수 있는 것
즉, relative를 부모라고 하고 absolute를 그 부모의 자식이라고 가정했을 때 absolute를 이리저리 돌아다니지 못하도록 부모인 relative가 absolute를 돌아다닐 수 있는 영역을 제한해 둔다고 생각하면 쉽다.
그 예로 다음과 같이 소스를 짰을 때,
relative라는 클래스 안에 absolute라는 클래스를 만들고
css로 relative로 width 400, height 400으로 지정하여 absolute는 이 범위안에서 이동 할 수 있도록 한다. 그리고 absolute가 width 100, height 100으로 이동하면 relative가 지정한 범위안에서 가로 100, 높이 100으로 이동되는 것을 확인 할 수 있을 것이다.
따라서 absolute를 사용하면 relative로 지정된 박스를 중심으로 위치가 조절되는 것이 되므로 자신의 상위에 위치한 박스를 대상으로 상대적으로 위치가 조정되므로 여러방면에서 이용이 가능하다.
출처: https://88240.tistory.com/241 [shaking blog:티스토리]
예전부터 그냥 넘어갔던 개념들인데
다시 차근차근 배워나가는중 실습하면서 더 배우자.
