position속성

position 속성

html요소를 원하는 위치에 배치하기 위해 사용하는 css의 속성이다.
position속성에는 relative, absolute, fixed가 있다.

1.relative

position: relative;로 설정하면 요소를 원래 위치에서 벗어나서 원래의 위치를 기준으로 상대적(relative)으로 배치할수 있게 된다. 요소의 위치 지정은 top, left, right, bottom으로 지정할 수 있다.

parent{
	position: relative;
    top: 10px;
    left: 15px;
}

이렇게 설정하면 원래의 위치를 기준으로 위에서 10px, 왼쪽에서 15px만큼 이동하게 된다.

2.absolute

position: absolute;는 부모요소가 있을 때 대부분 사용하는데, 부모 요소에 relative를 적용해주고 자식 요소에 absolute를 적용한다.

child{
	position: absolute;
    bottom: 20px;
    right: 10px;
}

parent안에 child가 있다면, child의 위치는 parent를 기준으로 아래에서 20px, 오른쪽에서 10px만큼 움직이게 된다.

3.fixed

fixed는 단어에서 유추가 가능한데, 화면을 아래로 스크롤링 하더라도 상단의 메뉴바 같이 특정 요소가 고정되어서 움직이지 않는 경우가 fixed를 적용한 예시이다.

menu-bar{
  position: fixed;
  top: 0;
  width: 100%;
}

위의 코드를 작성하면 menu-bar가 화면 상단에 고정되어 스크롤을 아래로 내려도 menu-bar는 그자리에서 움직이지 않고 고정된다.