-알게된점
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 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터
해당 요소가 얼마나 떨어져있는지를 결정합니다.
'TIL,WIL(일간,주간 회고)' 카테고리의 다른 글
| 2022.12.10 TIL call by value, call by reference, Call by assignment(call by object) (1) | 2022.12.10 |
|---|---|
| 2022.12.07 TIL 파이썬 전역변수 선언방법,사용방법 (0) | 2022.12.08 |
| 2022.12.07 TIL css의 offset개념 (0) | 2022.12.08 |
| 2022.12.06 TIL div배치 문제 (0) | 2022.12.06 |
| 2022.12.06 TIL css 폰트사이즈 관련 (0) | 2022.12.06 |