[CSS] 포지션 relative

4700 단어 CSSCSS 
<!DOCTYPE html>
<html>
    <head>
        <style>
            html{border: 1px solid gray;}
            div{border: 5px solid tomato; margin: 10px;}
            #me{
                position: relative; /*기본값은 static*/
                left: 100px; 
                top: 100px;
            } /*offset이라고 불린다*/
        </style>
    </head>
    <body>
        <div id="other">other</div>
        <div id="parent">parent
            <div id="me">me</div>
        </div>
    </body>
</html>

  • 포지션의 기본 값은 static이다.
  • static일 때에는 #me의 위치가 적용되지 않으니 relative로 설정해준다.
  • left: 100px, top:100px와 같은 설정이 적용되는 것을 볼 수 있다.
사용권한
TIL - 17 | Layout의 모든 것

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage