[CSS] 포지션( Position ) 개념

CSS position에는 4가지가 있습니다.

1. static

<style type="text/css">
        div{
               border:5px solid tomato;
               margin:10px;
        }       
</style>

<div id="other">other</div>
<div id="parent">
        parent
        <div id="me">me</div>
</div>

• CSS에는 positon 값으 아무것도 할당하지 않았습니다.
• 각 element들은 position : static;을 기본 값으로 갖고 있는데요.
• static이면 offset 값을 무시합니다.
• offset이란 떨어진 정도를 의미합니다.

#me{
        left:100px;
        top: 100px;
}

• 이번에는 위의 예제에서 <div id="me">에 offset을 적용해보겠습니다.
• 왼쪽으로부터 100px, 위쪽으로부터 100px 떨어진 위치로 이동하고 싶었는데, static이기 때문에 결과는 같을 것입니다.

<div id="me">를 이동하고 싶다면 position을 바꿔줘야 합니다.

'

2. relative

#me{
        position: relative;
        left:100px;
        top: 100px;
}

• 위의 예제에서 position : relative로 수정한 후, 실행 결과입니다.
• 이번에는 <div id="me">에 offset이 적용된 것을 확인할 수 있습니다.

여기까지 static과 relative를 정리하면 다음과 같습니다.

• static
• 자기가 원래 위치해야 하는 그곳에 정적으로 위치하게 되고, 기본 값입니다.
• relative
• 자기가 원래 위치해야 하는 위치를 기준으로 상대적인 offset 거리 만큼 이동합니다.

3. absolute

absolute는 relative와 달리, static이 아닌 조상의 position 위치를 기준으로 element의 offset을 적용하고 싶을 때 사용합니다.

말이 좀 어려운데 예제를 보면서 이해해보도록 하겠습니다.

<style type="text/css">
#parent, #other{
         border:5px solid tomato;
}

#me{
         background-color: black;
         color:white;
}
</style>

<div id="other">other</div>
<div id="parent">
        parent
        <div id="me">me</div>
</div>

position : absolute를 적용하지 않은 원래 상태입니다.

이 상태에서 <div id="me">에 offset을 준다면 어떻게 될까요?

#me{
        background-color: black;
        color:white;

        position: absolute;
        left:0px;
        top:0px;
}

• left, top의 offset 값이 0 이고, position이 static이 아니므로 offset이 적용되었습니다.
• 그런데 그 위치는 html 문서의 시작위치입니다.
• 그 이유는 <div id="other">와 <div id="parent ">의 position이 static이기 때문에, <div id="me">의 시작위치를 가장 최상위인 html 시작점으로 이동한 것입니다. 그 상태에서 offset을 0으로 할당했으니, html 시작점에 위치하게 되는 것이죠.

이 상태에서 offset을 지워보겠습니다.

#me{
        background-color: black;
        color:white;
        position: absolute;
}

• offset을 지우니까 원래 위치해야 하는 부모 밑에 위치하게 되는 것을 확인할 수 있습니다.
• 초기 모습과 비교했을 때, <div id="me">의 영역이 전체를 차지하다가 content 내용 만큼만 차지하고 있는 것을 볼 수 있습니다.
• position : absolute를 부여하니, 영역이 content만큼만 차지하네요.
• #me는 #parent의 자식이였는데, position : absolute를 하게 되면 부모와의 링크가 끊기면서 부모와 무관해집니다.
• 따라서 #me의 크기가 부모의 크기를 따라가지 않게 되므로, 자신의 content 만큼의 크기만 갖게 되기 때문입니다.

absolute는 static이 아닌 조상의 position 위치까지 이동하여 offset이 적용된다 했습니다.

정말 그런지 확인하기 위해 <div id="parent">의 position : relative로 부여해보겠습니다.

#parent{
        position: relative;
}

#me{
        background-color: black;
        color:white;
        position: absolute;
        left:0px;
        top:0px;
}

• <div id="me">의 위치는 <div id="parent ">의 시작 위치로 이동했으며, content가 겹치는 것을 확인할 수 있습니다.

그런데 <div id="parent"> 위에 position : relatvie인 <div id="grand">요쇼가 하나 더 존재하면 어떻게 될까요?

#grand{
        position: relative;
}

#parent{
        position: relative;
}

#me{
        background-color: black;
        color:white;
        position: absolute;
        left:0px;
        top:0px;
}




<div id="other">other</div>
<div id="grand">
<div id="parent">
                parent
                <div id="me">me</div>
</div>
</div>

• 이 경우, <div id="me">의 위치는 <div id="parent">가 아니라, <div id="grand">의 시작점에 위치하게 됩니다.

4. fixed

fixed는 말 그대로 고정 시키는 의미입니다.

이를 활용하면 웹 페이지 상단에 고정된 네비게이션 바로 꾸미는 것이 가능해집니다.

#parent, #other{
        border:5px solid tomato;
}
#me{
        background-color: black;
        color:white;
        position: fixed;
        left:0px;
        top:0px;
}

#large{
        height: 1000px;
        background-color: tomato;
}

 
<div id="other">other</div>

<div id="parent"> parent
        <div id="me">me </div>
</div>

<div id="large">large</div>

• 일부로 스크롤을 내릴 수 있도록 <div id="large">에 height를 크게 주었습니다.
• <div id="me">에 position : fixed 를 부여했더니, 해당 요소가 좌측 상단에 고정된 것을 확인할 수 있습니다.

이상으로 position에 대한 내용을 마치도록 하겠습니다.

어려울 수 있는 내용이지만 중요한 내용 중 하나이므로, 꼭 이해해야 하는 부분이라고 생각합니다.

[ 출처 ]

생활코딩 CSS - position