15. position _ 위치지정

position은 위치를 지정하는 요소로 레이아웃을 잡을때 뻔질나게 쓰입니다.
relative와 absolute, fixed가 있는데 기준점, 고정성 등의 차이가 있습니다.

기본적으로 어떤 position을 사용할지 입력한 후, top, bottom, left, right의 값을 주면 됩니다.
기준점은 따로 지정이 되지 않으면 나의 부모, 내 윗대에 position이 지정되어 있다면 그 윗대가 기준이 됩니다.
기본형은 아래와 같습니다.

<p class="box_ex">position</p>
 

CSS

<style>
  p.box_ex {width:70px;height:30px;position:relative;top:20px;left:100px;background:tomato;}
</style>
 

position

relative

relative는 내가 현재 위치한 자리를 기준으로 움직입니다.
나의 현재 위치에서도 상단 왼쪽 끝이 기준점이 됩니다. relative는 자신의 자리를 기억하고 공간을 차지합니다.
앞에 property는 기준으로 할 방향, value는 수치 입니다.relative는 top과 left만 property로 사용합니다.
만약 top:20px;이라 준다면, 위에서 20px만큼 갈꺼니까 아래로 20px 내려간단 소립니다.
left:100px;은 왼쪽 기준 100px간다란 소리니 오른쪽으로 100px 가겠지요.
확인합시다.

<div class="box_normal">아무값도 주지 않은 박스</div>
<div class="box_relative">relative 값을 준 박스</div>
 

CSS

<style>
  div.box_normal {width:200px;height:30px;background:skyblue;}
  div.box_relative {width:200px;height:30px;background:springgreen;position:relative;top:20px;left:200px;}
</style>
 

아무값도 주지 않은 박스

relative 값을 준 박스

absolute;

absolute는 내 위치따윈 다 무시하고 새롭게 제일 위에 제일 왼쪽에서 시작하는 겁니다.
자신의 자리를 기억하고 공간을 차지하는 relative와 달리 absolute는 공간을 차지하지 않고 공중에 떠있습니다.
absolute는 top, left는 물론 bottom과 right도 사용할 수 있습니다.
absolute에서 가장 중요한것은 기준이 되는 부모를 설정해 줘야 한다는 겁니다.
만약 상위에 position 요소가 하나도 없다면 브라우저 기준으로 최상단 왼쪽이 기준이 되버립니다.
그러므로 absolute를 사용할땐 absolute 요소를 감싸는 div를 하나 만들고
거기에 relative를 준 후 absolute를 먹여야 합니다.

<div class="box_wrap">
   <div class="box_normal">아무값도 주지 않은 박스</div>
   <div class="box_absolute">absolute 값을 준 박스</div>
</div>
 

CSS

<style>
  div.box_wrap {width:600px;height:100px;position:relative;border:2px solid tomato;}
  div.box_normal {width:200px;height:30px;background:skyblue;}
  div.box_absolute {width:200px;height:30px;background:springgreen;position:absolute;bottom:20px;right:200px;}
</style>
 

;아무값도 주지 않은 박스

absolute 값을 준 박스

fixed

fixed는 브라우저를 기준으로 항상 같은 자리에 위치하는 값입니다.
아무리 스크롤이 늘어나도 항상 같은자리에 있기에 쇼핑몰 네비게이션 같은 곳에 많이 쓰입니다.
fixed 또한 top, bottom, left, right를 다 쓸 수 있고 브라우저 최상단 왼쪽을 기준으로 합니다.
계속 거슬렸을 fixed의 예시를 확인합시다.

<div class="box_fixed">fixed는 항상 고정되어 있어요!!!</div>
<p class="ex_inblock inbl">block</p>
 

CSS

<style>
  div.box_fixed {width:300px;height:30px;text-align:center;line-height:30px;font-size:12px;position:fixed;top:0;left:50px;background:skyblue;}
</style>
 

fixed는 항상 고정되어 있어요!!!

z-index

모든 태그들은 먼저 작성한 코드부터 밑에 차곡차곡 쌓입니다.
position들도 마찬가지에요. 하지만 사람일이 항상 계획처럼 되나요.
내용상으로는 1,2,3,4지만 눈으로 보이기엔 4,3,2,1일 수도 있는법입니다.
그럴때 순서를 바꿔주는 것이 z-index입니다.
숫자가 클수록 우선순위가 높아져 위로 튀어 올라옵니다.기본값은 1 입니다.
z-index를 줬을때와 주지 않았을때를 비교해 보세요.

<div class="box_wrap">
   <ul class="index index_none">
      <li class="fourth">1</li>
      <li class="third">2</li>
      <li class="second">3</li>
      <li class="first">4</li>
   </ul>
   <ul class="index index_use">
      <li class="fourth">1</li>
      <li class="third">2</li>
      <li class="second">3</li>
      <li class="first">4</li>
   </ul>
</div>
 

CSS

<style>
  div.box_wrap {width:600px;height:100px;position:relative;border:2px solid tomato;}
  ul.index {list-style:none;position:relative;left:50px;}
  ul.index_use {left:200px;}
  ul.index li {width:50px;height:50px;position:absolute;}
  ul.index li.first {background:coral;top:0;left:0;}
  ul.index li.second {background:springgreen;top:10px;left:10px;}
  ul.index li.third {background:tomato;top:20px;left:20px;}
  ul.index li.fourth {background:skyblue;top:30px;left:30px;}
  ul.index_use li.first {z-index:2;}
  ul.index_use li.second {z-index:3;}
  ul.index_use li.third {z-index:4;}
  ul.index_use li.fourth {z-index:5;}
</style>
 

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

* 개인적인 공부를 정리하는 블로그입니다.