• HTML/CSS에서 Position의 정의

    HTML에서 Tag나 Elements들이 어디에 위치할것인가 를 정하는 것이다.

  • relative

<!DOCTYPE html>
<html>
  <head>
    <style>
        html{border:1px solid gray;}
        div{
            border:5px solid tomato;
            margin:10px;

    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
  </body>
</html>

해당코드는
ID가 other인 elements 다음 parent라는 ID의 elements가 오고 parent안에 me라는 ID를 가진
elements가 소속된것이다.
1234.png
그림으로 나타내면 이렇게 된

me를 이동시킬려고 하는데
left : 100px
라고 하면

왼쪽으로부터 100px떨어진다는 의미이다

여기에

#me
{
    position:relative
    left : 100px
    right : 100px
    top : 100px
    bottom : 100px
}

을 적용 시켜주게되면
left와 top값만 적용되게 된다.
따라서 relative의 속성은
부모에 있어서 상대적이라는 것이다
따라서

<!DOCTYPE html>
<html>
  <head>
    <style>
        html{border:1px solid gray;}
        div{
            border:5px solid tomato;
            margin:10px;
        }
        #me 
        {
            position: relative;
            left: 100px;
            top :100px;

        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
  </body>
</html>

이렇게해주게 된다면결과는

5.png

이렇게 된다.

  • static

    static은 정적이라는뜻인데 static을 써주게 되면 해당 elements가 가지고있었던 고유의 위치에 위치하게된다.
    이떄 left와 top등 방향을 이동시켜주는 속성들은 먹히질 않는다.

  • Absolute

    Absolute는 부모에대해 상대적인 위치가 아니라 HTML Elements를 기준으로 절대적인 위치를 정하고 싶을때 사용한다

말로하기 어려우니 그림으로 보여주자면

#me{
            position: relative;
            left :0px;
            top : 0px;
            background-color: black;
            color: white;
        }

일때는

1.png
이며

#me{
            position: absoulte;
            left :0px;
            top : 0px;
            background-color: black;
            color: white;
        }

일때는
2.png
이렇게 된다.

  • 아무런 값도 주지않았을때에는 부모의 위치를 기준으로 자신의 위치가 생긴다 .
  • absoulte를 하고 위치값을 주었을때는 부모와의 연관성이 없게된다.
  • 부모의 위치에 relative를 했을때에는 부모의 위치를 기준으로 OffSet값을 지정
  • fixed

어떤 스크롤이나 모니터에서 완전히 고정된 위치에 elements를 놓고싶을때 사용한다

3.png

이경우에 스크롤을 내려도 me의 위치는 고정되게 된다.