웹 기록용
css position 속성값 ( static / relative / absolute/fixed) 본문
position 정의
문서 상에 요소를 배치하는 방법을 정의하고 top, bottom, right, left 로 최종 위치를 결정한다
top : 윗면을 기준으로 #만큼 떨어져 위치하게 됨 bottom : 아랫면으로부터 #만큼 떨어져 위치하게 됨 left: 왼쪽면으로부터 #만큼 떨어져 위치하게 됨 right: 오른쪽면으로부터 #만큼 떨어져 위치하게 됨 |
position 속성값
position속성에는 아래 표에 나와 있는 속성값들을 지정할 수 있다
| 속성값 | 정의 | |
| static | position을 별도로 지정하지 않을 시에 갖는 기본값 | |
| relative | static과 일반적인 흐름을 따라 배치되나, static위치에서 top,bottom,left,right와 같은 속성에 의한 상대적인 위치에서 배치 본인 위치를 기준 |
|
| absolute | 일반적인 흐름을 따르지 않음. position:Static; 속성을 가지고 있지 않은 부모를 기준으로 움직이며, 상위 요소인 부모에 relative의 태그가 없다면 최상위 태그 body를 기준으로 함 |
|
| fixed | absolute와 비슷하나 absolute와 다르게 viewpoint를 기준으로 위치가 배치됨 스크롤을 움직여도 고정된 자리에 위치함 |
|
position 위치조정
값은 left, right, top, bottom
위 4가지 값의 속성값은 부모역할을 하고 있는 엘리먼트를 기준으로 한다
relative도 위치속성을 통해 위치 이동이 가능하다
position 주요 개념
| absolute가 적용된 태그는 static상태를 유지한다. 위치를 바꿔주려면 위치 속성을 사용해야 한다. |
| fixed와 absolute는 한가지 특징을 제외하고 동일한 특징을 지니고 있다. |
| absolute는 width: auto;일때 0이다 ->그러므로 너비높이 기본값이 0으로 작동하기 때문에 바로 형태를 확인하기가 어렵다 구현할 때 html에 글자를 먼저 작성한 상태로 시작하는 것이 좋다 |
| absolute는 html구조상으론 자식 엘리먼트로 인지되지만 좌표에서는 body 또는 relative를 기준으로 작동한다 *relative는 fixed와 absolute로 대체할 수 있다 |
| absolute는 너비높이 상속도 부모엘리먼트가 아닌 부모역할을 하는 엘리먼트에서 상속받는다 |
| absolute는 display 영향을 받을 수 없다 |
| static은 fixed와 absolute를 가둬 놓을 수 없다 (부모역할을 할 수 없다) |
| relative는 static과 동일한 특징을 가지고 있다 단, fixed와 absolute를 가둬놓을 수 있다 (부모역할을 할 수 있다) 💨💨 relative도 위치속성을 통해 위치 이동이 가능하다 |
| relative도 위치속성을 통해 위치 이동이 가능하다 *dispaly : none; -> 구조 삭제 |
position: static
요소들이 html에 작성된 순서대로 (그대로) 반영되어 위치하며, positon:static일때 (디폴트)
top,bottom,left,right의 속성값은 무시된다
position: relative
box-2의 position을 relative로 변경 후 top:33px; left:43px;만큼 주었을 때 박스가 원래의 위치에서 이동한 것을 볼 수 있다
(top,bottom,left,right의 속성값을 이용해 원래의 위치에서 상대적으로 배치할 수 있음 - static과 다른 점)
position: absolute
1) 부모 position이 relative;값이 아닐 때
-> box-2의 position을 absolute로 변경 후 bottom:30px; left: 10px;를 주었을 때
부모 요소인 container를 기준으로 위치가 변경 된 것이 아니라 최상요소인 body를 기준으로
위치가 변경 된 걸 알 수 있다
이유 : 부모요소인 container의 position이 relative가 아니기 때문
2) 부모 position의 relative;값일 때
-> box-2의 position을 absolute로 변경 후 bottom:30px; left: 10px;를 주었을 때
부모 요소인 container를 기준으로 위치가 변경된 것을 볼 수 있다
이유 : 부모요소인 container의 position이 relative이기 때문에
position: fixed
뷰포인트를 기준으로 top, left, right, bottom을 통하여 이동하며 스크롤를 내려도 위치가 고정적이다
+plus개념 hover
