CSS

포지션

포지션

엘리먼트의 위치를 지정하는 4가지 방법이 있습니다. 

  • static
  • relative
  • absolute
  • fixed
  • 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다. 

static VS relative 

 예제 - position_1.html

<!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>

absolute 

 

예제 - position_2.html 

<!DOCTYPE html>
<html>
  <head>
    <style>
        #parent, #other, #grand{
            border:5px solid tomato;
        }
        #grand{
            position: relative;
        }
        #me{
            background-color: black;
            color:white;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="grand">
       grand
        <div id="parent">
           parent
           <div id="me">me</div>
        </div>
    </div>
    
  </body>
</html>

fixed 

 

예제 - position_3.html

<!DOCTYPE html>
<html>
  <head>
    <style>
        body{
            padding-top:30px;
        }
        #parent, #other{
            border:5px solid tomato;
        }
        #large{
            height:10000px;
            background-color: tomato;
        }
        #me{
            background-color: black;
            color:white;
            position: fixed;
            left:0;
            top:0;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <div id="other">other</div>
    <div id="parent">
       parent
       <div id="me">me</div>
    </div>
    <div id="large">large</div>
  </body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. 오빠는다르다
    감사합니다~!!!!!!
  2. Hoon Young Park
    저는 조금 다르게 이해를 했습니다.
    static - 순수 그 자체다.
    relative - 부모의 기준으로 움직인다.
    absolute - 부모의 인연을 끊는것을 넘어서 부모가 마음에 들지 않으면 부모를 버린다.ㄷㄷ
    fixed - 부모와 인연을 끊는다.
    저는 이렇게 이해를 해야 좀더 relative와 absolute의 상관성이 이해 되는 것 같습니다,ㅎㅎ
  3. jimmyzip
    absolute,fixed를 하면 부피(면적), 위치관계는 부모와 끊기지만

    태그 마크업상에서 설정한 초기의 부모관계에서 상속되는 color같은건 이어집니다.

    #parent{color:red;}를 주면
    absolute,fixed로 offset만큼 이동시켜도 #me의 콘텐츠 색상이 red로 바뀝니다.
  4. jimmyzip
    저도 강의 시청?수강자인데요 ^^;;; 상호 학습차원에서, 제가 이해하고 있는 만큼만 답변하겠습니다.
    A1. 모든 관계가 끊기지는 않습니다. 상속 받을 거 있으면 받고나서, layout상의 위치관계만 끊어진다고 알고있습니다.
    absolute, fixed가 자식이 부모에게서 파양되는게 아니라 자취방만 offset위치로 옮겨간다 정도...?
    실제로 parent에 color:red;를 적용하니 #me에서 상속 받더군요
    ////
    A2. static이 아닌 부모, 즉 relative가 설정된 태그는 음....absolute가 걸려있는 자식이 offset이라는 주소로 이사가는데, 그 이사가는 주소의 기준점, 동사무소 정도 되겠습니다. #grand{position:relative;}더라도 #me의 부모는 여전히 #parent입니다. /////
    A3. #me{position:fixed;left:100px;top:100px;}면 #me라는 이 자식놈이 완전 시쳇말로, 멍멍이ㅆ마이웨이 나는 곧 죽어도 top:100px;left:100px;에서만 산다!!라고 자기 위치를 고수합니다. 그 자리에 다른 놈이 살고있어도, 그 위에 이불 덮어지듯이 그 자리를 고수합니다. 아마 기준점은 html(브라우저)0,0이리라고 봅니다.

    완전 마이웨이를 고집하는 녀석이라 화면 밖으로 보내버릴 수도 있습니다. 넉넉잡아 -3000px 정도면 화면 밖에 있어서 존재하지만 존재하지 않는 가출소년 처럼 설정할 수 있지만, 엄연히 #parent라는 부모있는 자식입니다.

    absolute;로도 똑같이 left:-9999px정도 때려서 화면 밖으로 보내버릴 수 있는데, relative를 어느 부모(또는 부모의 부모의 부모의....)에 주느냐에 따라 등록기준지가 달라질 뿐 화면 밖으로 가출시킬 수 있는 건 똑같습니다.

    absolute로 #me를 움직이면, #me의 후속요소들이 있다면 후속요소들은 #me가 있던 자리로 치고들어옵니다.
    relative로 #me를 움직이면, #me가 원래 있던 자리는 지켜진 채로 #me만 이동합니다.

    몇 개 실험해보고 요기까지 알아냈네요^^;;;
    대화보기
    • 갱갱갱
      안녕하세요 강의 정말 잘 듣고 있습니다.
      질문 몇가지 드립니다.

      Q 1.
      absolute, fixed 속성에서 부모-자식 관계가 끊긴다고 하셨는데 위치에 관련된 관계만 끊기는 것인가요,
      아니면 모든 관계가 끊기는 것인가요?
      예를 들면, 해당 예제에서
      <div id="parent">
      parent
      <div id="me">me</div>
      </div>
      의 상태가
      <div id="parent">parent</div>
      <div id="me">me</div>
      로 바뀌는 것인가요?

      Q 2.
      absolute 상태가 되면 static이 아닌 부모를 기준으로 해서 자신의 위치가 지정된다고 하셨는데,
      그럼 새롭게 부모-자식 관계가 설정되는 것인가요?

      Q 3.
      Q 2의 질문이 fixed에도 똑같이 적용이 되는 것인가요?

      이상입니다.
      답변 기다리겠습니다.

      다시 한번 정말 감사합니다!
    • 웅쓰
      복잡했던 개념이 확실히 정리됬습니다! 감사합니다.!
    • illliilllliillliii
      position 나올때마다 덜덜 떨었었어요 ㅠㅠㅠ 이제 정리가 되네요! 잘봤습니다 ㅠㅠ
    • 사그루
      감사히 잘 보면서 개념정리 했습니다!
      정말 감사합니다.
    • 세븐나이츠
      너무 좋은 강의 감사합니다
    • Chanyang Kim
      우와;;;; 쉬울줄 알았더니 허벌라게 헷갈리네요;;
    • 김성환
      relative에서 html태그 영역을 넘어가서 표시되는 것은 어떻게 해석해야 하나요/?? html을 벗어나는 영역이 있고 그 영역에 대해서 궁금합니다.
    • 쿠쿠다스
      감사합니다
    • 14번째
      5.20.
    • 한번 더 봐야겠네용 ㅠ
    • 공삼이육
      감사합니다!
    • php가 첫취업?
      강의 너무 잘해주십니다...감사합니다^^
    • matheios
      감사합니다~~
    • funlife
      감사합니다.
    • kimkong
      강의 너무 재밌습니다. 감사합니다!!
    • 오원구
      어렵지만 즐겁게 강의듣고 있습니다.
      고맙습니다.
    • 광뀨
      0216 완료
    • matheios
      강의 감사합니다~
    • 임지호
      엘리먼트의 위치를 정하는 속성 position 속성값 4가지
      1. static(기본값) : 움직이지 않고 정적인 상태
      2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직인다
      3. absolute : position값이 relative인 부모를 기준으로(없다면 웹페이지의 가장 가장자리 기준) 움직인다.
      * 자식의 위치값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만 해진다.
      그리고 값을 아예 없애면 원래 위치로 돌아간다.
      4. fixed : 스크롤을 움직여도 지정된 위치에 고정된다.
      * absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해진다.
    • 기본기에 충실할 수 있도록 도와주시는 감사한 egoing님!!
      늘 감사합니다.~~^^
    • sssssqew
      absolute - static 이 아닌 위치로 지정된 부모의 위치를 기준으로 함
      relative - 부모 아래 자신의 static 위치를 기준으로 함
      fixed - scroll에 무관하게 자신의 위치에 고정
    • 감사합니다!!
    • 최현승
      161009완료
    • wlsl
      2016.09. 09 완료!
    • 꽃마리
      강의를 정말 쉽게 잘 설명하시네요.
      그동안 position에서 많이 혼동되었는데 많은 도움이 되었어요.
      학원에서도 이해못한 걸 여기서 해결하네요.
      정말 최고이십니다^^
    • 코딩신
      최고에요!!
    • 신병국
      항상 감사합니다 너무 재미있습니다!!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기