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. 갱갱갱
    안녕하세요 강의 정말 잘 듣고 있습니다.
    질문 몇가지 드립니다.

    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에도 똑같이 적용이 되는 것인가요?

    이상입니다.
    답변 기다리겠습니다.

    다시 한번 정말 감사합니다!
  2. 웅쓰
    복잡했던 개념이 확실히 정리됬습니다! 감사합니다.!
  3. illliilllliillliii
    position 나올때마다 덜덜 떨었었어요 ㅠㅠㅠ 이제 정리가 되네요! 잘봤습니다 ㅠㅠ
  4. 사그루
    감사히 잘 보면서 개념정리 했습니다!
    정말 감사합니다.
  5. 세븐나이츠
    너무 좋은 강의 감사합니다
  6. Chanyang Kim
    우와;;;; 쉬울줄 알았더니 허벌라게 헷갈리네요;;
  7. 김성환
    relative에서 html태그 영역을 넘어가서 표시되는 것은 어떻게 해석해야 하나요/?? html을 벗어나는 영역이 있고 그 영역에 대해서 궁금합니다.
  8. 쿠쿠다스
    감사합니다
  9. 14번째
    5.20.
  10. 한번 더 봐야겠네용 ㅠ
  11. 공삼이육
    감사합니다!
  12. php가 첫취업?
    강의 너무 잘해주십니다...감사합니다^^
  13. matheios
    감사합니다~~
  14. funlife
    감사합니다.
  15. kimkong
    강의 너무 재밌습니다. 감사합니다!!
  16. 오원구
    어렵지만 즐겁게 강의듣고 있습니다.
    고맙습니다.
  17. 광뀨
    0216 완료
  18. matheios
    강의 감사합니다~
  19. 임지호
    엘리먼트의 위치를 정하는 속성 position 속성값 4가지
    1. static(기본값) : 움직이지 않고 정적인 상태
    2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직인다
    3. absolute : position값이 relative인 부모를 기준으로(없다면 웹페이지의 가장 가장자리 기준) 움직인다.
    * 자식의 위치값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만 해진다.
    그리고 값을 아예 없애면 원래 위치로 돌아간다.
    4. fixed : 스크롤을 움직여도 지정된 위치에 고정된다.
    * absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해진다.
  20. 기본기에 충실할 수 있도록 도와주시는 감사한 egoing님!!
    늘 감사합니다.~~^^
  21. sssssqew
    absolute - static 이 아닌 위치로 지정된 부모의 위치를 기준으로 함
    relative - 부모 아래 자신의 static 위치를 기준으로 함
    fixed - scroll에 무관하게 자신의 위치에 고정
  22. 감사합니다!!
  23. 최현승
    161009완료
  24. 2016.09. 09 완료!
  25. 꽃마리
    강의를 정말 쉽게 잘 설명하시네요.
    그동안 position에서 많이 혼동되었는데 많은 도움이 되었어요.
    학원에서도 이해못한 걸 여기서 해결하네요.
    정말 최고이십니다^^
  26. 코딩신
    최고에요!!
  27. 신병국
    항상 감사합니다 너무 재미있습니다!!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기