프론트엔드/CSS

CSS - position

ksge7 2020. 8. 24. 01:22

position이란?

웹 문서 안의 각종 요소들을 자유자재로 배치해주는 속성이다.

 

position 속성을 이용하면 텍스트, 이미지 등 여러 요소를 원하는 위치에 배치가 가능하다.

 

position의 속성값

각 요소는 position의 속성값 4개 중 한 개를 부여할 수있다.

 

그리고 해당 요소는 right, left, top, bottom을 이용해서 위치를 이동시킬 수 있다.

 

속성값

설명

static


static은 position 속성의 기본 값. 해당 스타일이 적용된 태그의 위치에 고정.

요소들의 위치를 옮길 수 있는 top, left, right, bottom 등은 사용 불가

relative


static 속성과 마찬가지로 해당 스타일이 적용된 태그의 위치에 나타남.

하지만 static과 달리 고정이 아님.

left, top 등의 속성을 적용시켜 요소의 위치 이동이 가능함.

absolute


absolute 속성은 relative와 마찬가지로 요소의 위치 이동이 가능하다.

기준 위치가 가장 가까운 부모나 조상 요소 중 position이 relative인 요소다.

즉 absolute를 사용하려면 해당 요소를 감싸는 <div>를 만들고

position을 relative로 지정해놓고 써야 한다.

그렇게하면 absolute는 relative를 중심으로 움직인다.

fixed


브라우저 창을 기준으로 위치가 결정된다.

fixed를 속성값으로 줄 경우 브라우저 창의 왼쪽 위 꼭짓점을 기준으로 둔다.

그리고 아무리 스크롤이 생겨서 위아래로 이동해도fixed 속성값은

항상 브라우저 창을 기준으로 고정이므로 움직이지 않는다.

 

<body>

    <p style="position: static;">
        <br>포지션:static<br><br>(속성값에 영향 없음)
    </p>

    <p style="position: relative; left: 50px;">
        <br>포지션:relative<br><br>(html 요소의 기본위치를 기준으로 위치설정)
    </p>
    
    <p style="position: fixed; top: 0px; right: 0px;">
        <br>포지션:fixed<br><br>(스크롤 움직여도 고정)
    </p>
    
    <div style="position: relative;">
        <div id = "div2" style="position: absolute;">
            <br>포지션:fixed<br><br>(스크롤 움직여도 고정)
        </div>
        <br><br><br><br>배경 박스: absolute는 이 박스를<br>기준으로 위치를 잡는다
    </div>
    
</body>