CSS - Position

DEV_HOYA·2022년 9월 25일
0

CSS

목록 보기
1/1
post-thumbnail

CSS POSITION

    <div>Hello</div>
    <div style="position: relative;">Hello
        <div style="position: relative; top: 10px;">Hello
            <div>Hello</div>
            <div style="position: static;left: 20px;">static</div>
            <div style="
                border: 5px solid red;
                background-color:rgba(255,0,0,0.5);
                position: relative;
                left: 20px;
                top: 20px;">relative</div>
            <div style="
                border: 5px solid green;
                background-color:rgba(0,255,0,0.5);
                text-align:center;
                position: absolute;
                left: 0;
                top: 0;">absolute</div>
            <div style="
                border-color: blue;
                background-color:rgba(0,0,255,0.5);
                text-align:right;
                position: fixed;
                top: 0;
                left: 0;">fixed</div>
            <div>Hello</div>
        </div>
    </div>
    <div style="height: 1103px;">Hello</div>
  • 이동 전

  • 이동 후

  1. static : position의 디폴트는 static이다
  2. relative : relative는 원래자기위치기준으로 움직인다.
  3. absolute : absolute는 부모위치기준으로 움직인다.
    부모가 static(default)면 부모를 무시한다.
  4. fixed : fixed는 부모가 relative든 신경안쓰고 최상위 부모기준으로 잡는다.
    스크롤조차도 무시한다.(스크롤 위아래로 움직여도 그자리 고정)

0개의 댓글