생활코딩

Coding Everybody

코스 전체목록

닫기

포지션

포지션

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

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


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

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

    의 차이인 것 같네요
  41. 무빙무민
    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 완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기