15. CSS - 레이아웃 - position

배치 관련 스타일 - position

• position : relative;
  • 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성
  • 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성 사용 가능
• position : absolute;
  • 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를  배치.
• position : fix;
  • 항상 고정된 위치에 요소를 배치
  • 화면이 움직여도 항상 같은 위치에 위치함.
  • ex) 홈페이지 배너나 맨 위로 올리는 버튼
• position : sticky;
  • 요소가 보여지는 화면을 벗어났을 때 스티커 처럼 화면에 붙여서 고정된 위치를 가지게 만듦.
  • fixed의 응용 버전

 

HTML 작성 화면
CSS 작성 화면 - position : relative, absolute 지정. -border-radius로 원형응로 만들어줌.
첫 번째 원 CSS 작성 화면
두 번째 원 CSS 작성 화면
세 번째 원 CSS 작성 화면
웹에서 출력된 화면

z-index : position 속성에 의해서 겹쳐진 요소들의 순서를 지정하는 속성
            : 숫자가 클수록 제일 위에 올라와있음.

 

 

• 요소를 정가운데 배치하기
  • 배치될 요소를 사방에서 잡아 당기기
  • 배치될 요소에 margin: auto;를 추가해 감싸는 요소와의 간격을 자동으로 조정해주기.

HTML 작성 화면
CSS 작성 화면 - class="container1"의 요소의 CSS 작성
CSS 작성 화면 - 가운데 들어갈 원의 위치 조정
웹에서 출력된 화면

 

• position : sticky

 

HTML 작성 화면
CSS 작성 화면 - z-index를 100으로 설정 해 제일 위에 있도록 지정
웹에서 출력된 화면 1
웹에서 출력된 화면 2 - 화면을 밑으로 내린 상태에서도  배치 관련 스타일이 젤 위에 있음.