position-absolute

지금까지 relative, fixed에 포지셔닝에 대해서 알아보았는데

이번엔 absolute다

포지셔닝이 안된요소는 무조건 position: static; 이다

relative는 원래 있던 위치를 기준으로

fixed는 브라우저를 기준으로

absolute는 

가장 가까운 포지셔닝이 된 조상 (Ancestor)요소가 기준이라고 한다

예시를 들기위해 코드를 가져왔당

 

여기에

position: relative;            top: 40px;            left: 90px;

원래 초록사각형이 있는 위치에서 top 40px left 90px 떨어졌다

position: absolute;            bottom: 40px;

그리고 .blue에는 absolute 로 포지셔닝해주고 bottom값을 40px 준다

그랬더니 .green 에서 40px 아래로 떨어졌다

이건 아까 글에 썼듯이 absolute는 포지셔닝이 된 조상 (Ancestor)요소가 기준 이기 때문에

.blue 의 가장 가까운 조상은 .green 이다 .green은 position:static이 아닌 position:relative로 포지셔닝 되있기 때문에

.blue가 absolute로 포지셔닝 했을 때.green 을 기준으로 잡게된다 

따라서 .green의 40px 아래로 떨어지게 되는 것이다

그럼만약 .green 에 포지션을 안주고 .red에 포지셔닝을 해준다면?

그럼이제 .red에게 기준을 맞추게 된다

position: absolute;

            bottom: 40px;

            right: 10px;

으로

끄읏