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. 이경일
    position type으로
    "relative"는 현재 element위치에서 이동시키는 것이다.
    "static" 의 경우는 이동없이 생성된 위치를 고수한다.
    "absolute"는 html태그 위치에서 부터 절대값으로 위치를 지정한다.
    단, 부모 element에서 position속성의 값이 static이 아니라면
    그 부모 element의 position 위치에서 부터의 절대값 위치로 지정된다.
    "fixed"는 스크롤과 상관없이 자신의 위치를 고수한다.
    absolute와 같이 부모element와 독립되기때문에 witdth와 height값을 다시 입력해주어야한다.
  2. eded
    absolute 속성을 주는 순간 z축이 변경되었다고 이해하시면 될거같습니다.
  3. violet
    css 수업 들으면서 처음으로 멘붕이 온 것 같아요. 실제로 사용해본 적이 없어서 이해가 쉽지 않은 듯해요. 좀 더 사용해보면 익숙해지겠죠!
  4. 오빠는다르다
    감사합니다~!!!!!!
  5. Hoon Young Park
    저는 조금 다르게 이해를 했습니다.
    static - 순수 그 자체다.
    relative - 부모의 기준으로 움직인다.
    absolute - 부모의 인연을 끊는것을 넘어서 부모가 마음에 들지 않으면 부모를 버린다.ㄷㄷ
    fixed - 부모와 인연을 끊는다.
    저는 이렇게 이해를 해야 좀더 relative와 absolute의 상관성이 이해 되는 것 같습니다,ㅎㅎ
  6. jimmyzip
    absolute,fixed를 하면 부피(면적), 위치관계는 부모와 끊기지만

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

    #parent{color:red;}를 주면
    absolute,fixed로 offset만큼 이동시켜도 #me의 콘텐츠 색상이 red로 바뀝니다.
  7. 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 자세히 보기