c11. CSS 포지션 프로퍼티

CSS 포지션 프로퍼티

포지션 프로퍼티 (position property) 은 태그들을 어떻게 위치시킬지에 대한 유형을 지정합니다.

모두 네가지의 포지션 값이 있는데 아래와 같습니다.

	기본위치 : static
	상대위치 : relative
	고정위치 : fixed
	절대위치 : absolute

태그들은 위, 아래, 왼쪽, 오른쪽 프로퍼티로 정렬 시키는데, 먼저 포지션 프로퍼티 값에 무엇을 설정 하느냐에 따라 가끔 정렬이 원하는데로 되지 않을 수 있습니다.

따라서, 위, 아래, 왼쪽, 오른쪽 속성 값들은, 포지션 프로퍼티 값에 따라 달리 보이게 될 것입니다.

position: static;

일반적인 포지셔닝으로 기본값입니다.

position: static; 으로 설정된 태그들은 특별히 위치가 지정되지 않습니다.

단지, 페이지내 일반적인 흐름에 따라 늘 위치 합니다.

<style>
div.static {
position: static;
border: 10px solid yellow;
}
</style>
<div class="static">
position: static; 즉, 기본위치로 포지셔닝 된 div 태그
</div>

position: static; 즉, 기본위치로 포지셔닝 된 div 태그

---

position: relative;

position: relative; 는 상대적인 위치에 놓이게 하는 속성입니다.

상대적으로 위치된 태그들로, 위, 아래, 오른쪽, 왼쪽 속성을 부여하면, 위치가 조정되게 됩니다.

<style>
div.relative {
position: relative;
left: 50px;
width: 400px;
border: 10px solid green;
}
</style>
<div class="relative">
position: relative; 즉, 상대위치로 포지셔닝 된 div 태그
</div>

position: relative; 즉, 상대위치로 포지셔닝 된 div 태그

---

position: fixed;

position: fixed; 를 갖는 태그들은 뷰포트 (viewport, 화면창) 내에서 상대적인 위치에 고정됩니다.

즉, 다시 말해, 스크롤링을 해도 언제나 같은 위치에 머무르게 된다는 의미입니다.

위, 아래, 오른쪽, 왼쪽 속성으로 태그의 위치를 지정해 줄 수 있습니다.

<style>
div.fixed {
position: fixed;
bottom: 0; right: 0;
width: 300px;
border: 10px solid pink;
}
</style>
<div class="fixed">
position: fixed; 즉, 고정위치로 포지셔닝 된 div 태그
</div>

position: fixed; 즉, 고정위치로 포지셔닝 된 div 태그

---

position: absolute;

position: absolute; 를 갖는 태그들은 가장 가깝게 위치한 부모 태그로 부터 상대적인 위치에 위치합니다.

(위의 position: fixed; 를 갖는 태그들은 뷰포트 (viewport, 화면창) 에 대해 상대적인 위치 였던 것에 대비됩니다).

그리고, 만일 절대위치 속성을 갖는 태그들이 위치를 잡은 부모태그가 없다면, 문서의 body 를 기준으로 페이지 스크롤 할때 이동하게 됩니다.

이때 "먼저 위치한" 태그는 정적위치(static) 를 제외한 다른 모든 포지셔닝 속성값이 될 수 있습니다.

<style>
div.relative2 {
position: relative;
width: 200px;
height: 200px;
border: 10px dotted red;
}

div.absolute {
position: absolute;
top: 90px;
right: -130px;
width: 200px;
height: 100px;
border: 10px dotted blue;
}
</style>
<div class="relative2">position: relative; 즉, 상대적으로 위치된 태그들로, 위, 아래, 오른쪽, 왼쪽 속성을 부여받는 속성값입니다.
<div class="absolute">position: absolute; 즉, 가장 가까이 위치한 태그에 대해 절대위치에 고정되는 속성값입니다.</div>
</div>

position: relative; 즉, 상대적으로 위치된 태그들로, 위, 아래, 오른쪽, 왼쪽 속성을 부여받는 속성값입니다.

position: absolute; 즉, 가장 가까이 위치한 태그에 대해 절대위치에 고정되는 속성값입니다.

---

태그 끼리 서로 겹칠 때, z-index 속성으로 태그의 쌓는 순서(어느 태그가 앞에 올 것인지) 를 지정합니다.

z-index 가 큰 것이 항상 앞에 옵니다. 

그리고 z-index 가 지정되지 않은 두개의 태그에서는, HTML 코드에 나중에 위치한 태그가 위로 갑니다.

<style>
img.absolute2 {
position: absolute;
left: 200px;
top: 200px;
z-index: -1;
}
</style>
<img class="absolute2" src="http://icons.iconarchive.com/icons/designbolts/ios8-cirtangle-concept/128/Gallery-icon.png" width="128" height="128">
<p>이미지가 z-index -1 을 가지므로, 텍스트의 뒤에 놓이게 됩니다.</p>

이미지가 z-index -1 을 가지므로, 텍스트의 뒤에 놓이게 됩니다. 스크롤 맨 위의 산 모양 그림 참조하세요.

---

[광고] Udemy 동영상 강의로 보기