position의 기능, 가운데 정렬, z-index

Position  기능

top, left, bottom, right로 요소의 위치를 변경할 수 있다.

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다.

position은 좌표속성을 적용할 기준점을 지정해주는 역할을 한다.

또한 position 속성을 부여하면 요소가 공중에 뜬다.

 

Position 종류

• position : static;
  좌표적용 불가.
  top, left, bottom, right, z-index 속성이 아무런 영향도 주지 않는다.
  
  
• position : relative;
  기준 : 자기자신의 원래위치
  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
  
  
• position : absolute;
  부모 중에 position : relative를 가지고 있는 부모(가장 가까운 위치 지정 조상 요소)가 기준
  
  
• position : fixed;
  기준이 현재 보여지는 브라우저 화면 (뷰포트의 초기 컨테이닝 블록)
  화면내에서 고정
  
  
• position : sticky;
  스크롤을 따라 움직이다 내가 정한 offset에 닿으면 그순간부터 fixed처럼 고정됨
  스크롤 동작이 존재하는 가장 가까운 동작에 달라붙는다.
  스크롤 박스에 고정

 

position:absolute를 적용한 가운데 정렬

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 적절히
}

 

position:relative를 적용한 가운데 정렬

.container {
  border: 1px solid black;
  width : 700px;
  height : 100px;
  margin: auto;
  position: relative;
  margin-top: 30px;
}

 display : block은 기본적으로 적용되어 있으므로 생략함

(button인 경우 display:block을 줘야함) 

 margin: auto; 를 준 다음에 margin-top 을 30px 주면 가운데 정렬 되어있는 상태에서 상단 30px 마진이 적용됨 
  

 

position:relative 의 z-index

position:relative 속성을 주면 (공중에 붕 뜬것처럼) top, left 좌표이동 할 수 있다.

이처럼 position 속성으로 좌표이동을 하는 요소들은 공중에 떠있다고 생각하면 된다.

그 중에 어떤 요소가 맨 위에 보여질지를 결정하는 것이 z-index 속성이다. 

z-index가 클 수록 앞으로 온다.