본문 바로가기
프로그래밍/HTML, CSS

CSS - position 프로퍼티 사용하기

by pentode 2018. 5. 9.

CSS의 position 프로퍼티는 top, right, bottom, left 프로퍼티로 HTML 요소의 위치를 지정할때 무엇을 기준으로, 어떤 식으로 사용되어질지 그 방법을 지정합니다.


postion 프로퍼티에 사용되어지는 다섯가지 값입니다.

- static

- relative

- fixed

- absolute

- sticky


1. postion: static;


position 프로퍼티를 지정하지 않았을 때의 기본값이 static 입니다. 이 상태에서는 top, bottom, left, right 프로퍼티가 동작을 하지 않습니다. HTML요소의 배치는 일반적인 흐름을 따름니다.


<style>

div.container {

    border:solid 1px green;

    height: 200px;

}

div.static {

    position: static;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

</style>


<div class="container">

    <div class="static">내용</div>

</div>




2. position: relative;


HTML 요소의 postion 프로퍼티를 relative로 설정하면 일반적인 위치(position이 static인 상태에서의 위치)를 기준으로하여 top, right, bottom, left로 지정된 거리 만큼 이동하여 위치합니다.


relative를 사용하여 이동시킨 요소가 있던 자리는 다른 컨텐츠들을 요소가 떠난 자리에 맞춰서 조정되지 않고 그대로 남아 있게 됩니다.


<style>

div.container {

    border:solid 1px green;

    height: 200px;

}

div.static {

    position: static;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

div.relative {

    position: relative;

    border:solid 1px red;

    top: 10px;

    left: 10px;

}

div.normal {

    border:solid 1px blue;

}

</style>


<div class="container">

    <div class="static">내용</div>

    <div class="relative">RELATIVE</div>

    <div class="normal">내용</div>

</div>




3. position: fixed;


position 프로퍼티를 fixed로 지정하고 하고 위치를 지정하면 viewport(브라우저의 컨텐츠가 보여지는 영역)에 대해 상대적인 위치를 차지하게 됩니다. 이것은 브라우저 상에 항상 같은 위치에 위치하게 된다는 것입니다. 화면의 스크롤에도 영향을 받지 않습니다.


fixed로 지정된 요소는 그 요소가 일반적으로 차지했었을 자리를 남기지 않습니다. 다른 요소가 있으면 fixed인 요소는 없는 것처럼 자리를 차지하게 됩니다.


<style>

div.container {

    border:solid 1px green;

    height: 200px;

}

div.static {

    position: static;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

div.fixed {

    position: fixed;

    border:solid 1px red;

    bottom: 20px;

    right: 20px;

}

div.normal {

    border:solid 1px blue;

}

</style>


<div class="container">

    <div class="static">내용</div>

    <div class="fixed">FIXED</div>

    <div class="normal">내용</div>

</div>




4. position: absolute;


position이 absolute 이면 가장 가까운 static이 아닌 position을 가진 부모에 대해 상대적인 위치를 가집니다. position을 가지는 부모가 없으면 body 에 대해 상대적인 위치를 가지게 됩니다. fixed처럼 position이 지정되지 않았을때의 위치를 남기지 않습니다.


<style>

div.container {

    position: relative;

    border:solid 1px green;

    height: 200px;

}

div.static {

    position: static;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

div.absolute {

    position: absolute;

    border:solid 1px red;

    left: 2px;

    bottom: 2px;

}

div.normal {

    border:solid 1px blue;

}

</style>


<div class="container">

    <div class="static">내용</div>

    <div class="absolute">ABSOLUTE</div>

    <div class="normal">내용</div>

</div>



container의 position을 relative로 지정하여서 absolute로 지정된 div가 container에 대해 상대적으로 배치 됩니다.



5. position: sticky;


sticky 는 사용자의 스크롤 위치를 기반으로 배치됩니다. sticky 값을 가진 요소는 relative와 fixed 상태가 토글 된다고 생각하면 되겠습니다. relative처럼 동작하다가 화면이 스크롤되어 요소가 화면 밖으로 벗어나려고 하면 fixed 처럼 동작하여 viewport에 고정됩니다. 스크롤된후 원래 있던 위치는 그대로 남아 있게 됩니다.


정확히 relative처럼 동작하는 것은 아닙니다. static 일때의 위치가 기본이고, 그 위치보다 더 크게 + 방향으로 값이 주어질 때 위치가 바뀌는데, body를 기준으로 계산됩니다. 가로 스크롤의 경우는 sticky 요소의 너비가 100%가 아닐때만 동작합니다.


<style>

div.container {

    border:solid 1px green;

    height: 500px;

    width: 500px;

}

div.static {

    position: static;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

div.sticky {

    position: sticky;

    border:solid 1px red;

    top: 5px;

    left: 5px;

}

div.normal {

    border:solid 1px blue;

}

</style>


<div class="container">

    <div class="static">내용</div>

    <div class="sticky">STICKY</div>

    <div class="normal">내용</div>

</div>



반응형