2022.12.07 TIL CSS position 개념

TIL,WIL(일간,주간 회고)

worldint 2022. 12. 8. 10:01

-알게된점

css 스타일에 position 속성값이 라는게 있다

1. postion:static;

2. postion:absolute;

3. postion:relative;

4. position: fixed;

1. postion: static;

position이 static으로 되어있으면 요소들(elements)들이 원래 있어야하는 위치에 있게된다

html문서가 작성된 순서데로 배치된다는 말이다

따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다

2.posion: absolute;

absolte는 독립적으로 움직일수있는데,

완전히 독립적인게 아니다 position이 static이 아닌(relative 등) 첫번째 상위 요소안에서 독립적으로 움직일수있는것이다.

상위 요소가 모두 static이라면 DOM트리 최상위에 있는 <body>가 배치의 기준이 된다.

따라서 어떤 요소의 display 속성을 absolute로 설정하면,

부모 요소의 display 속성을 relative로 지정해주는 것이 관례입니다.

3.position: relative;

relative로 해놓으면 요소를 원래 위치에서 벗어나 샹대적으로 움직일수있게된다

요소를 원래의 위치를 기준으로 상대적으로(relative) 배치한다고 생각하면 된다

offset 값으로 원래위치에서 옮길수있다.(top,bottom,left,right를 사용해서)

  position: relative;  top: 28px;  left: 48px; //원래 위치에서 탑에서 28px, 왼쪽에서 48px떨어트려라

위와같이 값을 스타일 속성에 넣어주어사용한다.

4.position: fixed;

화면의 스크롤을 움직여도 항상 그자리에 고정되어 움직이지 않게하는것,

다른 요소와 겹칠수있음, z-index속성을 사용하여 어떤 요소를 위에놓을지 정할수도있다.

fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문이다.

top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터

해당 요소가 얼마나 떨어져있는지를 결정합니다.