CSS position의 absolute 속성

abosulte 예제를 진행하기 전에 우선 코드를 이렇게 작성을 해주세요

그리고 css파일에는 아래와 같이 작성을 또 해주세요

<웹페이지 결과물>

그럼 이렇게 보이는 것을 우선 확인하실 수 있습니다.

이제 CSS파일에다가 position:absolute 속성을 입력을 해봅시다.

그럼 결과물로 갑자기 이렇게 합쳐지는 것을 확인하실 수 있습니다!

이게 왜 이렇게 되냐면 absolute 를 작성을 하게되면 작성한 모든 부분이 left : 0 top : 0 으로 모이게 되서

겹쳐 보이는 것입니다.

absolute는 절대적인 좌표값을 줄 때 사용하는 것으로 우리가 설정을 해주지 않아서 위의 결과가 나오게 되는 것이다.

그러면 절대값을 우리가 설정을 해보자.

그러면 이렇게 위치가 바뀌게 된다. 기본 설정이 left와 top으로 되어 있기 때문에 왼쪽 상단에 나타난 것이지

설정에 따라서 달라질 수 있다.