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. eunso
    static까지 완료
  2. DreamBoy
    2023.09.19. CSS - 레이아웃 - 포지션 파트를 시작합니다.
  3. AgainstartJH
    2022년 11월 17일 목요일 이번꺼는 어렵네요. 뭐라는지 이해를 잘 못했습니다...
  4. 헤밍웨이
    static, relative, absolute, fixed 확인했습니다 :)
  5. 09년생개발자
    2022.3.21 아주 쉽습니다
  6. INJE
    22/03/17
  7. 드림보이
    2021.11.14. 포지션 파트 수강완료
  8. Juyeon Choi
    static 아이 /자아 생성전
    relative 어린이 /부모에 영향받는
    absolute 청소년 /자신의 적합한 롤 모델을 찾는
    fixed 성인 /자신의 위치를 잡은

    이런모습같네요.
  9. neal
    2021.09.24 완료
  10. 두드
    2021.07.22 완료
  11. 감자먹는넘
    포지션 복습필요
  12. jeisyoon
    2021.06.22 position - OK
  13. Princess Tiabeanie
    생각보다 어렵긴하지만, 어느 정도 이해는 되는것같습니다. 잘 봤습니다.
  14. choi
    완료
  15. Minint
    2021.03.27
  16. 이해는 되는데 실무에 적용하면 엄청 헷갈릴거 같아요 @_@,,
  17. yogg
    relative !
    absolute !!


    static (고정할때!)
  18. 마릴곰이
    최고
  19. position: static(부모에 고정)/relative(부모를 기준으로 이동)/absolute(부모를 무시)/fixed(스크롤에서 독립적으로)
  20. 임태경
    완료했습니다 감사해요
  21. 스마일가이
    2021.01.29 완료 감사합니다
  22. datsciseol
    20210116
  23. 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
  24. 주니어개발자
    상,하위 태그간 relative, absolute 에 따라 다르게 나타날 수 있는 효과를 코드로 확인해봤습니다.

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

    의 차이인 것 같네요
  37. 무빙무민
    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 - 화면의 위치에 고정시켜 스크롤으로부터 독립되게 한다.
    • 숨이
      완료햇습니당
    • 득구태웅
      설명 넘 잘하세요^^
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기