CSS - 16. Position - absolute

1. Position

이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌다. CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있다. 

position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않고, 나머지 3가지들을 사용한다.

• position: static;

• position: relative;

• position: absolute;

• position: fixed;

 

---

2. relative

position: relative; 자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동하지 않는다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

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

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

div.relative는 위의 div와 똑같이 그려졌다.

div.relative.top-20은 위로 20px 이동하고, 왼쪽에서 30px만큼 떨어졌다. 여기서 알 수 있는 점은 마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 된다는 것이다.

 

---

3. absloute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다. 어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 

일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative;를 부여하면 된다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;

p태그에 노란색으로 배경을 칠했다. 원래 p태그는 block-element이기 때문에 가로크기가가로 크기가 부모 너비만큼 전부 차지해야 하는데, 마치 inline-element처럼 내용의 크기만큼만 너비가 생겼다. 이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로 크기가 된다.

right: 0;의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 부모의 우측에 딱 붙어서 나와있다. bottom: 0;도 마찬가지다.

.right-0에 left:0;을 추가하면 부모의 왼쪽에 0 떨어져 있다는 뜻이라서 왼쪽부터 요소가 시작하게 된다. 마치. right-0에 width: 100%를 준 것과 같은 결과이다.