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. 기본기에 충실할 수 있도록 도와주시는 감사한 egoing님!!
    늘 감사합니다.~~^^
  2. sssssqew
    absolute - static 이 아닌 위치로 지정된 부모의 위치를 기준으로 함
    relative - 부모 아래 자신의 static 위치를 기준으로 함
    fixed - scroll에 무관하게 자신의 위치에 고정
  3. 감사합니다!!
  4. 최현승
    161009완료
  5. 2016.09. 09 완료!
  6. 꽃마리
    강의를 정말 쉽게 잘 설명하시네요.
    그동안 position에서 많이 혼동되었는데 많은 도움이 되었어요.
    학원에서도 이해못한 걸 여기서 해결하네요.
    정말 최고이십니다^^
  7. 코딩신
    최고에요!!
  8. 신병국
    항상 감사합니다 너무 재미있습니다!!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기