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. 두드
    2021.07.22 완료
  2. 감자먹는넘
    포지션 복습필요
  3. jeisyoon
    2021.06.22 position - OK
  4. Princess Tiabeanie
    생각보다 어렵긴하지만, 어느 정도 이해는 되는것같습니다. 잘 봤습니다.
  5. 완료
  6. Minint
    2021.03.27
  7. 이해는 되는데 실무에 적용하면 엄청 헷갈릴거 같아요 @_@,,
  8. relative !
    absolute !!


    static (고정할때!)
  9. 마릴곰이
    최고
  10. position: static(부모에 고정)/relative(부모를 기준으로 이동)/absolute(부모를 무시)/fixed(스크롤에서 독립적으로)
  11. 임태경
    완료했습니다 감사해요
  12. 스마일가이
    2021.01.29 완료 감사합니다
  13. datsciseol
    20210116
  14. malbong
    엘리먼트의 position 기본 값은 static

    position: static
    - left/right/top/bottom의 값을 무시함

    position: relative
    - left/right/top/bottom을 원래 있던 위치(부모아래)를 기준으로 움직임

    position: absolute
    - left/right/top/bottom을 html태그 기준으로 (X)
    -> 정확히는 "가까운 조상 중에 position:static 이 아닌 조상을 기준으로" (모두 없으면 그때, html임)
    - absolute를 하고, offset을 설정하지 않았다면 부모 밑에 그대로 있음
    -> 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문
    - absolute로 설정하게 되면 부모와의 링크가 끊김
    -> 크기도 content크기로 바뀜 (따로 설정하면 됨)

    position: fixed
    - left/right/top/bottom을 화면 기준 (스크롤에 독립적)
    - absolute와 마찬가지로 부모와의 링크가 끊김
    -> 크기도 content크기로 바뀜 (따로 설정하면 됨)

    cf) 우선순위 : left > right , top > bottom
  15. 주니어개발자
    상,하위 태그간 relative, absolute 에 따라 다르게 나타날 수 있는 효과를 코드로 확인해봤습니다.

    https://codepen.io......yXg
  16. 따뜻한츄르
    2020 12 30
  17. 201215 쇼핑몰에 보면 항상 top버튼이 스크롤을 내려도 따라오길래 궁금했었는데 이런 원리였군요
  18. jalhaja
    진짜 너무 유익하고 알아듣기 쉽네여 ㅜㅜ!!
  19. milati
    진짜 좋은 수업 감사합니다
  20. 켄드릭
    2020년 11월 04일(수) 12:15 1차 수강완료
  21. 3번째 실습에,, 감사합니다
  22. 콜라
    20200927 완료
  23. 김성곤
    20200722 감사합니다!
  24. jaehyunlee
    완료
  25. 한강
    position : static, relative, absolute, fixed
    어렵네요. 다시 한번 듣겠습니다.!
    200605
  26. laqah
    다음 postion 타입이 있다면 그건 아주 화면 밖을 나올 것 같네요..
  27. 문형
    즉 relative와 absolute의 차이는 부모 태그의 콘텐트 크기에 영향을 받거나 준다 / 받지도 않고 주지 않는다

    의 차이인 것 같네요
  28. 무빙무민
    absolute 강의에서 상대적이라는 것은 부모에게 position : relative; 가 적용되어있기때문에 부모기준 상대적인거고
    fixed강의 때의 경우는 #me의 부모인 #parent에게 position : relative; 가 적용되어있지 않기때문에 절대적인것아닐까여???
    대화보기
    • 무지개반사
      완료
    • 릿페
      absolute 강의에서는 absolute 속성은 포지션이 지정된 부모 기준 상대적으로 위치가 결정된다고 하셨는데 다음 강의 fixed에서는 포지션이 지정되지 않은 부모 기준이라고 말씀하셨는데 전자가 맞는 건가요 아님 후자가 맞는건가요?ㅠㅠ
    • 태태
      수강완료
    • 치디우기
      수강완료 - 19/08/29
    • 류석현
      수강완료
    • 싸커홍
      수강완료!!
    • FIRE
      20190729 완료
    • pr koo
      2019-6-30 완료!
      이론만 들었을때는 쉽다 생각했는데, 실제로 해보니 어렵네요 ㅠㅠ
    • lygon
      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축이 변경되었다고 이해하시면 될거같습니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기