1. position 속성

---

• position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.

1) static

• HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식이다.

• position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.

• 정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.

div.static {
    border: 2px solid #CD5C5C;
    position: static;
}

2) relative

• 상대 위치(relative position) 지정 방식은 해당 요소가 정적 위치(static position) 지정 방식일 때의 위치를 기준으로 위치를 설정하는 방식이다.

div.static {
    border: 2px solid #B8860B;
    position: static;
}

div.relative {
    border: 2px solid #CD5C5C;
    position: relative;
    left: 30px;
}

3) fixed

• 고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식이다. 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.

div.fixed {
	border: 2px solid #B8860B;
    width: 450px;
    position: fixed;
    top: 0;
    right: 0;
}

4) absolute

• 절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다. 그러나 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 된다.

• 하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다.

• 여기서 위치가 설정된 요소란, 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미한다.

<div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정하였습니다.
  <div class="absolute">(조상 요소를 가짐)이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
</div>
<div class="absolute">(조상 요소를 가지지 않음)이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>

div.relative {
    border: 2px solid #B8860B;
    width: 500px;
    height: 200px;
    position: relative;
}

div.absolute {
    border: 2px solid #006400;
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50px;
    right: 0;
}

• top 속성 미설정 시

• top 속성 설정 시

2. z-index 속성

---

• z-index 속성은 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다.

• 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 된다.

<div>
  <div class="static position">정적 위치(static position)</div>
  <div class="first position">고정 위치(fixed position)</div>
</div>
<br><br>
<div>
  <div class="static position">정적 위치(static position)</div>
  <div class="last position">고정 위치(fixed position)</div>
</div>

.position {
    width: 180px;
    height: 50px;
}

.static {
    background-color: lightblue;
    position: static;
}

.first {
    background-color: orange;
    position: fixed;
    top: 90px;
    left: 120px;
}

.last {
    background-color: orange;
    position: fixed;
    top: 180px;
    left: 120px;
    z-index: -1;
}

• 클래스명이 first position인 요소는 static position 요소보다 위에 있지만, last position 요소는 z-index: -1 속성이 있기 때문에 static position 요소보다 아래에 위치해 있다.