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. laqah
    다음 postion 타입이 있다면 그건 아주 화면 밖을 나올 것 같네요..
  2. 문형
    즉 relative와 absolute의 차이는 부모 태그의 콘텐트 크기에 영향을 받거나 준다 / 받지도 않고 주지 않는다

    의 차이인 것 같네요
  3. 무빙무민
    absolute 강의에서 상대적이라는 것은 부모에게 position : relative; 가 적용되어있기때문에 부모기준 상대적인거고
    fixed강의 때의 경우는 #me의 부모인 #parent에게 position : relative; 가 적용되어있지 않기때문에 절대적인것아닐까여???
    대화보기
    • 무지개반사
      완료
    • 릿페
      absolute 강의에서는 absolute 속성은 포지션이 지정된 부모 기준 상대적으로 위치가 결정된다고 하셨는데 다음 강의 fixed에서는 포지션이 지정되지 않은 부모 기준이라고 말씀하셨는데 전자가 맞는 건가요 아님 후자가 맞는건가요?ㅠㅠ
    • 태태
      수강완료
    • 치디우기
      수강완료 - 19/08/29
    • 류석현
      수강완료
    • 싸커홍
      수강완료!!
    • 20190729 완료
    • pr koo
      2019-6-30 완료!
      이론만 들었을때는 쉽다 생각했는데, 실제로 해보니 어렵네요 ㅠㅠ
    • 2019-03-03 완료
    • 한승민
      어렵지만 나름 재미있었습니다!!
      190226
    • jello
      position 속성
      엘리먼트의 위치를 지정하는 방법 (static, relative, absolute, fixed)

      position속성 미지정시 기본값은 static
      static - 원래 있어야 되는 위치에 정적으로 위치함(offset 무시)
        위치 설정이 되지 않은 상태

      top, bottom, left, right(offset)을 적용하고 싶을 경우
      position의 값을 static외의 값으로 지정해야 한다.
      (bottom, right < top, left 적용)

      *position을 지정해도 offset값을 지정하지 않을경우
      static처럼 원래 있어야 할 위치에 있게된다

      relative - 원래의 위치에서 상대적으로 위치를 변경

      absolute - html element를 기준으로 절대적인 위치로 변경

      **부모-자식 관계에 놓인 태그의 경우
      1) 자식태그가 absolute인 경우 부모태그는 자신의 크기만 가진다.
      이 때 자식태그는 block태그여도 inline태그처럼 컨텐츠만한 크기로 변한다.
      width와 height 값을 지정하면 크기 변경이 가능하다.
      (★fixed도 같은 효과)

      2) 여러 부모태그 중 absolute인 자식태그는
      position이 relative인 부모태그안에서 절대적으로 위치를 변경한다.

      fixed - 화면의 위치에 고정시켜 스크롤으로부터 독립되게 한다.
    • 숨이
      완료햇습니당
    • 득구태웅
      설명 넘 잘하세요^^
    • 쿵쿵이
      fixed 기능 신기해요!!감사합니다
    • css초보자
      첫번째 예제 똑같이 쳤는데 전 왜 me가 포지션이 이동이 안될까요?
    • javaz
      자막이 있으니 너무 편하네요 ㅎ
    • 스페이스몽키
      감사합니당!! ㅎㅎ
    • 옥슬이
      감사합니다
    • Seo Yun Seok Tudoistube
      생활코딩 듣고 '리베하얀'님 동영상 강좌 몇개 더보니 은근 코딩보다 잼있겠다는 생각이 들기 시작해요ㅋㅋ;;
      https://youtu.be......lj4
      https://youtu.be......XM0
    • 푸른하늘
      11일차 공부 감사합니다
    • 이경일
      position type으로
      "relative"는 현재 element위치에서 이동시키는 것이다.
      "static" 의 경우는 이동없이 생성된 위치를 고수한다.
      "absolute"는 html태그 위치에서 부터 절대값으로 위치를 지정한다.
      단, 부모 element에서 position속성의 값이 static이 아니라면
      그 부모 element의 position 위치에서 부터의 절대값 위치로 지정된다.
      "fixed"는 스크롤과 상관없이 자신의 위치를 고수한다.
      absolute와 같이 부모element와 독립되기때문에 witdth와 height값을 다시 입력해주어야한다.
    • eded
      absolute 속성을 주는 순간 z축이 변경되었다고 이해하시면 될거같습니다.
    • violet
      css 수업 들으면서 처음으로 멘붕이 온 것 같아요. 실제로 사용해본 적이 없어서 이해가 쉽지 않은 듯해요. 좀 더 사용해보면 익숙해지겠죠!
    • 오빠는다르다
      감사합니다~!!!!!!
    • Hoon Young Park
      저는 조금 다르게 이해를 했습니다.
      static - 순수 그 자체다.
      relative - 부모의 기준으로 움직인다.
      absolute - 부모의 인연을 끊는것을 넘어서 부모가 마음에 들지 않으면 부모를 버린다.ㄷㄷ
      fixed - 부모와 인연을 끊는다.
      저는 이렇게 이해를 해야 좀더 relative와 absolute의 상관성이 이해 되는 것 같습니다,ㅎㅎ
    • jimmyzip
      absolute,fixed를 하면 부피(면적), 위치관계는 부모와 끊기지만

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

      #parent{color:red;}를 주면
      absolute,fixed로 offset만큼 이동시켜도 #me의 콘텐츠 색상이 red로 바뀝니다.
    • 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님!!
        늘 감사합니다.~~^^
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기