[CSS] CSS 위치 지정

태그로 만든 영역을 위치 지정시켜 줌으로서 본격적으로 페이지의 구성 틀을 만듭니다.

시점에 따른 각각의 위치 지정을 지정해줄 수 있습니다.

 

 

정적 위치 지정 - Static Positioning

.static{
    position: static;
    left: 50px;
    top: 50px;
}

 

가장 기본적인 위치 지정입니다.

아무런 설정 값을 주지 않아도 기본적으로 적용되는 위치입니다.

position: static 이라고 굳이 명시하지 않아도 기본 위치에 위치하게 됩니다.

top, left, right, left 와 같이 특정 부분에 얼마나 위치 시킬 것인지 지정할 수 있으나 static은 기본 위치이기 때문에 적용되지 않습니다.

 

기본 위치에 지정되었습니다.

left와 top 에 위치 값을 조정해주었으나 변하지 않고 기본 위치에 있습니다.

 

 

 

상대적 위치 지정 - Relative Positioning

.relative{
    position: relative;
    top: 50px;
    left: 50px;
}

relative 는 자신을 기준으로 배치시키는 위치 지정 방식입니다.

자기 자신을 움직여 배치시킵니다.

top, left, right, left 와 같이 특정 부분에 얼마나 위치 시킬 것인지 지정할 수 있습니다.

 

left, top 각각 50px 씩 이동하게끔 설정하여 초록색 영역 자신이 움직입니다.

중요한 것은 position을 지정한 태그 자체가 기준이 되어 배치된다는 것입니다.

 

 

 

절대적 위치 지정 - Absolute Positioning

.absolute{
    position: absolute;
    left: 50px;
    top: 50px;
}

absolute는 자기 자신이 아닌 상위의 부모 태그의 position을 기준으로 위치되어 배치됩니다.

만약 상위 부모 태그에 아무런 position 이 없다면 일반적인 브라우저의 view 단을 기준으로 위치되어 배치됩니다.

 

부모 태그가 Absolute Positioning 이라고 적힌 div 영역이고, 이 영역을 기준으로 left 50px, top 50px 씩 움직여 위치하였습니다.

 

 

 

고정적 위치 지정 - Fixed Positioning

.fixed{
    position: fixed;
    left: 50px;
    top: 50px;
}

일반적인 브라우저의 view 단을 기준으로 위치되어 배치됩니다.

absolute 위치 지정이 상위 부모 태그의 position을 기준으로 배치되다가 없으면 브라우저의 view단을 기준으로 배치되지만 fixed 방식은 바로 브라우저의 view 단을 기준으로 배치됩니다.

 

브라우저의 view단의 왼쪽 상단을 기준으로 top(상단)에서 50px, left(왼쪽) 에서 50px 이동하였습니다.