[CSS] position

position 속성

 

1. static 

모든 태그들은 기본적으로 position:static 속성을 가짐(따로 position:static 속성을 주지 않아도 됨)

차례대로 왼쪽에서 오른쪽 위에서 아래로 쌓임

 

2. relative

기존 static이었을 때의 상태를 기준으로 왼쪽,오른쪽,위,아래 위치를 조절할 수 있음

relative는 각각의 방향을 기준으로 안쪽 방향으로 이동(바깥쪽 방향은 음수로 설정)

보통 태그는 같은 포지션이라면 나중에 나온 태그가 더 위쪽에 위치하지만 z-index속성으로 위쪽 태그 조절가능함

(z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성)

 

3. absolute

relative가 position:static인 상태를 기준으로 움직였다면 absolute는 position:static을 가지고 있지 않은 부모를 기준으로 움직임

만약 부모 중에 position이 relative,absolute,fixed인 태그가 없다면, 가장 위의 태그(body)를 기준으로 움직임

div태그가 absolute가 되면 더 이상 with:100% 아님

 

4. fixed

스크롤을 움직여도 해당위치에 고정되는 속성

absolute처럼 div가 width:100%가 아님

position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창

(기준점: 브라우저 왼쪽 위 꼭지점)

 

출처: https://engkimbs.tistory.com/922 [새로비]

출처:www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1