19. HTML Position

1.HTML Position

이제까지 html 코드를 작성하면,

작성한 순서대로 페이지에 그려졌습니다.

CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다.

예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다.

 

복잡한 레이아웃을 만들어주는 position 프로퍼티를 배울 차례입니다.

 

position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않아서 넘어가겠습니다.

이번 장에서는 relative와 absolute를 배워보겠습니다.

• position: static;
• position: relative;
• position: absolute;
• position: fixed;

1. relative

position: relative; 자체로는 특별한 의미가 없습니다.

딱히 어느 위치로 이동하지는 않습니다.

 

위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.

 

top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다.

2. absoute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.

어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.

부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
 
일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됩니다.

3. fixed

원래 위치와 상관없이 위치를 지정할 수 있습니다.

 

하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있습니다.

 

top, bottom, right, left등의 위치도 설정할 수 있습니다.