Position

position을 이해하기 위해 div 박스 3개를 생성한다.

<div class="box red">
	box1
</div>
<div class="box yellow locate">
	box2
</div>
<div class="box blue">
	box3
</div>

.box {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.blue {
    background-color: blue;
}

 

여기서 노란 박스에만 position 설정을 입력하며 테스트한다.

.locate { 
    position: relative;
    left: 30px;
}

 

기존에 있던 위치에서 움직인 것을 확인할 수 있다.

따라서 relative는 기존 위치 기준으로 top~right 위치 속성값이 적용되는 것을 확인할 수 있다.

단, 위치는 이동하지만 기존의 자리는 공백으로 유지된다.

 

static으로 수정하니 기존의 위치로 돌아왔다.

static은 웹 사이트의 기본 속성값으로 top~right 위치 속성값은 무시된다.

.locate { 
    position: static;
    left: 30px;
}

 

absoulte는 단어 뜻에 '절대적'이 있는 것처럼 본인이 속한 부모 절대값 기준으로 움직인다.

 단, 여기서 부모 태그는 relative, absolute, fixed 속성 중 하나여야 한다. 

그렇지 않으면 relative를 기본 속성으로 가진 body 태그 기준으로 움직인다.

.locate { 
    position: static;
    left: 30px;
}

 

fixed는 absoulte와 비슷하지만 스크롤를 내려도 그 위치에 고정된다.

이때 위치는 브라우저 창 기준이다.

.locate {
  position: fixed;
  left: 30px;
}

 

스크롤에 영향을 받지 않기 때문에 다이얼로그 팝업에 사용된다.

 

sticky는 relative와같이 기존 위치에서 움직이지만 스크롤로 이동할 수 있는 공간을 top~right 위치 속성으로 조절한다.

z-index는 static이 아닌 요소들 간에 위아래 배치 순서를 지정한다.

auto는 수치 0을 의미하며 높을 수록 위에 올로온다.

 

---

 

🔗 강의 링크

https://codingnoona.thinkific.com/