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