ch3 - 2. Position

1. Position이란?2. Position의 종류 2.1 static 2.2 relative 2.3 absolute 2.4 fixed

1. Position이란?

이름에서처럼, position이란 웹페이지에서 저희가 만들었던 html 태그나 id, class 박스 등의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.

2. Position의 종류

2.1 static

기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가집니다. 즉 html에 쓴 태그 순으로 위치가 지정되게 됩니다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성값이 주어졌을 때, 그를 무시하기 위해 사용될 때가 있습니다.


<!DOCTYPE html>
<html lang="kor">
<head>
  <meta charset="UTF-8">
  <title>static</title>
  <style>
  .box1{
    position:static;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:static;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box3{
    position:static;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

2.2 relative

단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있습니다. 그럼 대체 '무엇'에 상대적인지 궁금해하실 텐데요. 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적입니다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.


<!DOCTYPE html>
<html lang="kor">
<head>
  <meta charset="UTF-8">
  <title>relative</title>
  <style media="screen">
  .box1{
    position:static;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:relative;
    left: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

relative 속성을 주어 box2가 원래 있어야 할 자리에서 왼쪽으로 40px 떨어뜨린 모습입니다.

2.3 absolute

absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있습니다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있습니다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 됩니다.

그러나, 이 absolute도 눈치를 보는 속성이 있다면, 바로 relative입니다. relative 속성이 부모로 놓여있다면, absolute는 relative 박스 내를 기준으로 위치하게 됩니다. 마치 relative가 static의 자리를 유념하고 있는 것처럼요.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>relative-absolute</title>
  <style>

  .box1{
    position:relative;
    top:40px;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:absolute;
    top: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box3{
    position: absolute;
		top: 30px;
    left: 30px;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box3">box3</div>
  <div class="box1">box1
    <div class="box2">
      box2
    </div>

  </div>
</body>
</html>

상단의 코드를 웹페이지에 구현한 사진입니다. 이처럼 relative 속성에 구애받지 않는 box3은 left와 top에 어느 정도 px을 두어 떨어트렸을 때 상단 제일 왼쪽을 기준점으로 움직였다면, relative 속성인 box1 내에 구속받는 box2는 top: 40px 값을 주었을 때, box1의 위치를 기준으로 움직였음을 확인하실 수 있습니다. 즉 box2와 3에서 확인할 수 있듯 똑같이 position: absolute; 의 속성을 가지고 있어도, 상위 엘리먼트가 relative 속성을 가졌는지 아닌지에 따라 서로 다른 위치 결과가 나타난다는 것입니다.

2.4 fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용하시면 됩니다! position:fixed;를 기입하면, 해당 엘리먼트는 화면에 붙은 것처럼 그 자리에 계속해서 위치할 것입니다.