【CSS】position: absolute; 와 position: relative;

position: absolute;

요소 배치 위치 결정
사이트의 왼쪽 상단 부분을 기준으로 top 및 left를 사용하여 지정
right 또는 bottom을 사용할 수도 있습니다.
요소를 겹쳐서 표시 할 수도 있습니다.



정상적으로 만들면 위와 같습니다.
이것을 position: absolute; 를 사용해 이동시킵니다.

붉은 사각형을 ...

빨간색 사각형.css

position: absolute;
top: 100px;
left: 50px;

푸른 사각형을 ...

블루 사각형.css

position: absolute;
top: 170px;
left: 100px;

이런 식으로
왜 이런 위치가 되는가 하면



사이트의 좌상을 시작점・・・제로로 합니다.
빨간색 사각형으로 말하면, 그 제로의 위치로부터 top 는 100px 아래의 곳이 될거야.
그리고 left 는 50px 왼쪽에 갔던 곳이 될거야.
라는 것입니다.

position: relative;

지정된 부모 요소의 왼쪽 위 부분을 기준 위치로 설정할 수 있습니다.
부모 요소를 기준으로 자식 요소의 배치 위치를 결정할 수 있습니다.

조금 전 position: absolute; 에서 기준 위치는 사이트의 왼쪽 상단이라고 했습니다만
이 기준 위치를 변경할 수 있는 것이 position: relative; 입니다.



방금 그림을 사용하여 설명합니다.
빨간색 사각형을 부모 요소로 만듭니다

아, 어느 쪽인가를 반드시 부모 요소로 하지 않으면 안됩니다.
이대로 빨간색 사각형을 position: relative; 하지만 파란색 사각형은 움직이지 않습니다.
반드시 기준 위치로 하고 싶은 것을 부모 요소로 해주세요
움직이고 싶은 아이 요소는 부모 요소의 중첩해 코드 기입하면 괜찮습니다

이런 느낌
↓

예.html

    <div class="red">赤い四角
      <div class="blue">青い四角</div>
    </div>

이야기를 되돌리고 빨간색 사각형을 부모 요소로 만듭니다.
푸른 사각형을 자식 요소로 만들 때 CSS는 다음과 같습니다.

빨간색 사각형.css

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  line-height: 100px;
  position: absolute;
  top: 100px;
  left: 50px;
  position: relative;
}

position: relative; 그냥 추가했습니다
그래서 푸른 사각형은

블루 사각형.css

.blue {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  text-align: center;
  line-height: 100px;
  position: absolute;
  top: 170px;
  left: 100px;
}

아무 것도 변경하지 않았습니다
무슨 일이야?

이렇게 되었습니다

아까 정도는 사이트의 좌상을 기준으로 했습니다만
이번에는 빨간색 사각형의 왼쪽 상단을 기준으로했기 때문에
거기에서 top은 170px 아래에 있습니다.
그리고 left는 100px 왼쪽으로 갔을 때 파란 사각형이 배치되었습니다