[CSS] position

1. static : 모든 태그들의 기본. 디폴드 값이 static이라 따로 써주지 않아도 됨.

2. relative :  태그 위치 변경하고 싶을때 position : relative 사용. top, right, bottom, left 속성 사용 할 수 있음.

               각각의 방향을 기준으로 태그 안쪽방향으로 이동하기 때문에 바깥쪽으로 이동하게 하려면 -값을 줘야

 하는 특징이 있음. static 상태를 기준으로 주어진 값만 큼 움직임.

 

 top, left, right, bottom 속성이 있어야 움직임.

3. absolute : position : static 속성을 가지고 있지 않은 parents를 기준으로 움직인다. 

       부모 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

  absolute가 되면 div여도 더는 width가 100%가 아니다.

※ 3번은 부모 중에 position: relative;를 갖고 있는 요소에 의해 절대적인 위치를 갖게 된다. 

4. fixed : 위치를 아예 고정시켜버림. 스크롤로 해도 고정됨. absolute와 마찬가지로 더이상 div의 width 100%가 

아님.

예시)

박스 두개를 감싸는 div와 감싸져있는 박스 one, two를 만들어보고 포지션을 적용해보자.

노란색 박스는 one, 파란박스는 two 겉에 테두리는 두 박스를 감싸고 있는 div이다.

위의 설명대로 파란색에 absolute를 줘서 위치 이동을 저렇게 하고자 하려면??

감싸고 있는 부모에 포지션 relative를 주면 된다.

그리고 원하는 만큼. top, left, bottom, right를 이용해서 이동~!

노란상자는 fixed를 해놓았다. 이건 부모와 상관없음.

겉에 감싸고 있는 div를 옮기고 싶으면??

이미 포지션 relative를 적용시켜놨으니, 파란색 상자와 같이 top, left, bottom, right 를 이용해서 이동시키면 

된다.

만약에 감싸고 있는 div에 포지션값이 없이   top, left, bottom, right  만 속성으로 준다면, 아무런 변화가 없을 

것이다.

*하면서 느낀점 

  태그별로 border : 1px solid red 등 으로 각각 위 그림처럼 테두리나 배경화면 표시 후 움직이는거 보면

  작업하기 수월하다. absolute는 내가 어떤 것을 움직일까 고민하고, 움직이고자 하는 물체에 부여하고,

  그 물체는 어디에 감싸여있는지 부모태그를 확인해서 position : relative 값을 주면, 이해하기 쉬울 것 같다.

* 포지션 값은 같은 레벨의 태그에게 우선 적용된다.

   같은 레벨의 박스 3개가 있다고 보자

<div id="one">

 

</div>

<div id="two">

 </div>

 <div id="three">

  

 </div>

#one {

  border : 1px solid red;

  width : 500px;

  height : 500px;

  background-color : yellow;

  position : absolute;

  left : 100px;

}

#two {

  border : 1px solid red;

  width : 300px;

  height : 300px;

  background-color : green;

  position : absolute;

  left : 500px;

}

#three {

  border : 1px solid red;

  width : 100px;

  height : 100px;

  background-color : blue;

  position : relative;

  left : 400px;

}

상자안의 포지션값을 보면 알 수가 있다.

relative는 가장가까운 곳의 relative에게 반응한다.

1번 상자가 relative, 2번상자가 absolute, 3상자가 relative면

1번상자 밑으로 2번상자, 3번상자가 붙어있을 것 이다.  2번이 앱솔루트이기 때문에 3번상자는 1번상자 밑으로 기준을 잡고 이동한다.

1번 상자가 absolute, 2번상자가 absolute, 3상자가 relative면

2번 3번상자는 브라우져를 기준으로 위치를 잡는다.

3개다 릴레티브이면 1번밑에 2번, 2번밑에 3번상자가 온다.