[CSS] Position 속성

---

#1. Position 속성

1. Position 속성의 개념

1) position 속성 이란?

• 문서상에 요소를 배치하는 방법을 결정하는 속성이다.
• 속성값에 따라 좌표(top, right, bottom, left)가 설정되는 기준이 달라진다.

※ 특정 장소에 고정시켜 놓아야할 때는 position 속성을 사용, 두 요소를 옆으로 배치 시켜야 할 때는 float 속성을 사용한다.

 

2) 좌표 설정

• position 속성의 속성값이 지정된 상태에서 요소의 자표를 설정할 수 있다. (px 이나 %단위로 수치값을 지정한다.)
• top : 윗면에서 부터 얼마만큼 떨어뜨린다.
• right : 오른쪽면에서 부터 얼마만큼 떨어뜨린다.
• bottom : 아래쪽면에서 부터 얼마만큼 떨어뜨린다.
• left : 왼쪽면에서 부터 얼마만틈 떨어뜨린다.

 

2. 사용 가능한 속성값

1) static

• 기본값, 요소를 일반적인 문서 흐름에 따라 배치
• top, right, bottom, left 속성이 적용 안된다.
• 시용 할 일이 거의 없는 속성값이다.

div {
  position: static; 
}

 

2) relative(상대좌표)

• 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 이동값이 적용된다.
• 상대적인 위치에 배치. 즉, 요소의 본래 위치를 기준으로 배치한다.
• 요소의 원래 위치를 기준으로 좌표가 설정된다.
• relative로 이동시, 주변에는 변화가 없다.

div {
  position: relative; 
}

 

3) absolute(절대좌표)

• 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 이동값을 적용한다.
• 가까운 position 지정 요소가 없다면 브라우저 화면을 기준으로 위치를 잡는다
• 브라우저의 끝을 기준으로 좌표가 설정된다.
• absolute로 이동시 다른 요소가 그 자리를 대신한다.
• 부모요소의 posiotion 속성값이 relative나 absolute로 지정된 경우 부모를 기준으로 좌표가 설정된다.

div {
  position: absolute; 
}

 

4) fixed(고정좌표)

• 기본적으로 absolute와 동일하다.
• 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정시킨다. (스크롤이 이동하더라도 해당 요소는 고정)

div {
  position: fixed; 
}

 

5) sticky(유동좌표)

• 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 이동값이 적용된다.
• sticy 속성값은 필수적으로 top, bottom, left, right 중 하나를 필수적으로 설정해줘야 한다.
• 설정값 (ex. top: 10px)에 도달하기 전까지는 static 속성값 처럼 있다가 설정값에 다다르면 fixed 속성값 처럼 동작한다.

div {
  position: sticky; 
}

※ 주의사항

• 부모(혹은 조상)요소에게 overflow 속성이 hidden, scroll, auto가 지정되어 있다면 동작하지 않는다.
• 부모 요소는 반드시 height가 px값으로 지정되어 있어야 한다.
• 부모 요소에 %로 높이가 지정되어 있다면 동작하지 않는다.
• Safari에서도 동작하게 하려면 -webkit-sticky 속성을 추가해야 한다.

 

3. position 속성 응용

• 원하는 위치에 배치하기

[HTML]
<div class="container">
  <div class="logo">logo</div>
  <div class="side1">side1</div>
  <div class="side2">side2</div>
</div>


[CSS]
.container {
  width: 1000px;
  background-color: #eee;
  margin: auto;
  
  /* .logo의 좌표 기준점 설정 */
  position: relative;
  top: 50px;
  height: 150px;
}

.logo {
  width: 100px;
  height: 100px;
  background-color: #ff6600;
  
  /* 절대 좌표 방식 */
  /* box의 좌측 상단 꼭지점을 부모 중앙에 맞춤 */
  position: absolute;
  left: 50%;
  top: 50%;
      
  /* 크기의 반만큼 반대로 이동하면 가운데 배치 */
  margin-left: -50px;
  margin-top: -50px;
}

.side1 {
  width: 80px;
  height: 80px;
  background-color: #ff00ff;
  position: absolute;
  left: 50%;
  top: 50%;
  
  /* 왼쪽으로 이동 */
  margin-left: -240px;
  margin-top: -40px;
}

.side2 {
  width: 80px;
  height: 80px;
  background-color: #00ff00;
  position: absolute;
  left: 50%;
  top: 50%;
  
  /* 오른쪽으로 이동 */
  margin-left: 160px;
  margin-top: -40px;
}

 

4. z-index 속성

• position 속성으로 인해 요소가 화면상에 겹치는 경우 z-index 속성에 지정된 값의 크기를 비교하여 화면상에 띄워준다
• 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다. (값이 클수록 위(앞면)에 배치된다.)
  • 위치 지정 요소(positioned element) : position 속성이 정의 되어 있는 요소를 말한다. 
• 단순히 값의 크기만 비교할 뿐 반드시 순차적인 값을 사용할 필요는 없다
• 기본값은 0이고, 값이 동일하다면(혹은 지정되지 않았다면) HTML에 코딩된 순서로 정해진다.

div {
  z-index: 1;
}