position: [static,relative,absolute,fixed]

.button {
  position : static; /* 기준이 엄서요 */ default값 좌표설정x
  position : relative; /* 기준이 나요 */ : 원래위치부터 좌표변경
  position : absolute; /* 기준이 바로 위 부모요 */ : position:relative 가지고있는 부모에게 달려듬
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */ : 화면이  스크롤되어도 해당 버튼이 고정됨 
}

top, left, bottom, right 라는 속성을 사용하면

요소의 상하좌우 위치를 변경할 수 있습니다. 

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. 

 

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 값으 아무것도 할당하지 않았습니다.

#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이 적용된 것을 확인할 수 있습니다.

 

 

 

 

 

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 문서의 시작위치입니다.

 

 

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

#me{

        background-color: black;

        color:white;

        position: absolute;

}

• offset을 지우니까 원래 위치해야 하는 부모 밑에 위치하게 되는 것을 확인할 수 있습니다.
• 초기 모습과 비교했을 때, <div id="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 를 부여했더니, 해당 요소가 좌측 상단에 고정된 것을 확인할 수 있습니다.

 

 

 

 

.

 

 

 

 

 

[CSS] 포지션( Position ) 개념 :: victolee (tistory.com)

[CSS] 포지션( Position ) 개념