position

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

position 은 요소의 위치하는 방법을 지정합니다.
static(기본값), relative, absolute, fixed 을 사용합니다.

예제 1
position 개요 : 4가지 속성 보기
보기
position : static (기본값)
position : relative
position : absolute


position : fixed (클릭하면 없어집니다)
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 3px solid silver;
        margin-bottom : 20px;
        padding : 5px;
    }
    .css_test div {
        background : #ECECFF;
        border-radius : 5px;
        border : 5px solid blue;
        padding : 15px;
        text-align : center;
    }
</style>

<div class="css_test">
    <div style="position:static;">position : static (기본값)</div>
</div>
<div class="css_test">
    <div style="position:relative;">position : relative</div>
</div>
<div class="css_test">
    <div style="position:absolute;">position : absolute</div>
</div>
<br><br>
<div class="css_test">
    <div style="position:fixed;" onclick="$(this).hide()">position : fixed (클릭하면 없어집니다)</div>
</div>
설명

※ 화면에 고정되는 "position : fixed" 는 클릭하면 사라지게 해두었습니다.

- position 은 요소의 위치하는 방법을 지정합니다.
약간 어려운 개념이기도 합니다만(?) 이해 하고 나면 그렇게 어렵지 않습니다.

모든 요소들은 각자 자기의 위치에서 지정된 크기 만큼의 영역을 차지하고 있습니다.
position 은 이 요소들의 위치를 특별하게(?) 바꾸어 줄 수 있습니다.

위 예제는 회색 div 안에 파란색 div 를 넣고 속성을 지정한 후 어떻게 표시되는지 보이도록 만들었습니다.
absolute 는 회색을 뚫고 나왔으며 fixed 는 뚫고 나오기도 했지만 스크롤해도 위치가 고정됩니다. (따라다니죠)

그럼 간단히 살펴보고 다음 예제로 봅시다 ^^

- position : static 기본값 입니다. 아래 3개의 속성으로 지정하지 않는다면 요소들의 기본값 입니다.
- position : relative 상대위치값. 차지하는 영역을 그대로 유지하고 위치를 이동할 수 있습니다.
- position : absolute 차지하는 영역없이 위치를 지정할 수 있습니다.
- position : fixed 차지하는 영역없이 화면 스크롤에 영향을 받지않고 위치를 지정할 수 있습니다.

예제 2
실습 position : relative 예제 보기 (상대적인 위치로 지정)
보기
아래 이미지들은 position : relative 로 지정되어 있습니다.
슬라이더로 top, left 속성을 조절하여 위치를 이동시켜 봅시다.
top :
0
top : 0
left :
0
left : 0
설명

- 요소에 top, left 속성 등을 지정하여 위치를 이동시킬 수 있습니다.
- position : relative 로 지정된 상태에서만 이동할 수 있습니다.
- 요소들의 현재위치에서 상대적인 값으로 이동합니다.
- 즉 top:-100px 라고 설정한다면 현재 위치에서 위로 100px 만큼 올라가는 것이죠.
- 그리고 해당 요소의 위치에서 차지하고 있는 영역은 그대로 유지됩니다.

아래처럼 사용할 수 있습니다.
<div style="position:relative; top:-100px; left:10px;">내용물</div>

예제 3
position : relative 를 라디오 버튼에 적용한 예제
보기
기본
CSS 공작소
CSS 공작소
CSS 공작소
position:relative; top:10px;
CSS 공작소
CSS 공작소
CSS 공작소
position:relative; top:-10px;
CSS 공작소
CSS 공작소
CSS 공작소
소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        padding : 10px;
        margin-bottom : 15px;
    }
    .css_test input {
        position : relative;
    }
    .css_test.op1 input {
        top : 10px;
    }
    .css_test.op2 input {
        top : -10px;
    }
</style>

기본
<div class="css_test">
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
</div>

position:relative; top:10px;
<div class="css_test op1">
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
</div>

position:relative; top:-10px;
<div class="css_test op2">
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
    <input type="radio" name="css_test1" value="" /> CSS 공작소<br>
</div>
사용된 CSS (클릭시 보기) : bordermargin-bottompaddingpositiontop
설명
- 라디오 버튼의 위치를 조절하는 예제입니다.
- 라디오 버튼이나 체크박스의 위치가 문자열과 어긋날때 사용해서 조절해 주면 좋습니다. ^^
예제 4
실습 position : absolute 예제 보기 (절대적인 위치로 지정)
보기
아래 이미지들은 position : absolute 로 지정되어 있습니다.
슬라이더로 top, left 속성을 조절하여 위치를 이동시켜 봅시다.
top :
0
top : 0
left :
0
left : 0
설명

- position : absolute 로 설정된 요소에 top, left 같은 속성을 사용하면 relative 와는 다르게 동작합니다.
- absolute 라는 단어에서 보이듯 "절대적" 위치로 이동합니다.
- top:0 이라고 설정한다면 화면 제일 위쪽에 위치하게 됩니다.
- 참고로 페이지 왼쪽위는 top:0, left:0 입니다.
- 그리고 요소가 영역을 차지하지 않습니다.

- top 슬라이더를 만졌다면 이미지는 페이지 제일 위에 있을것입니다.
- left 슬라이더를 만졌다면 이미지가 다 겹쳐져 있을 것입니다.

예제 5
실습 position : fixed 예제 보기 (고정된 위치로 지정)
보기
이미지 아래의 버튼을 눌러보세요.
적용하기 버튼을 누른후 화면을 스크롤 해보세요.
소스
<style type="text/css">
    .css_test {
        border-spacing : 0;
        border : 5px solid silver;
        margin-top : 15px;
    }
    .css_test td {
        border : 1px solid black;
        height : 60px;
        text-align : center;
        width : 60px;
    }
    .css_test td img {
        bottom : 0;
        z-index : 100;
    }
</style>
이미지 아래의 버튼을 눌러보세요.<br>
적용하기 버튼을 누른후 화면을 스크롤 해보세요.
<table class="css_test" align="center">
    <tr>
        <td><img src="/img/css/bird32.gif" /></td>
        <td><img src="/img/css/bird20.gif" /></td>
        <td><img src="/img/css/bird21.gif" /></td>
        <td><img src="/img/css/bird30.gif" /></td>
        <td><img src="/img/css/bird34.gif" /></td>
        <td><img src="/img/css/bird27.gif" /></td>
        <td><img src="/img/css/bird28.gif" /></td>
    </tr>
</table>
<div class="mt10">
    <button type="button" onclick="$('.css_test td img').css('position','fixed')">position : fixed 와 bottom : 0 적용하기</button>
    <button type="button" onclick="$('.css_test td img').css('position','static')">position : fixed 해제하기</button>
</div>
설명

- position : fixed 를 이미지에 적용시켜 보는 예제입니다.
- 이 속성이 적용된 이미지는 화면 스크롤에 상관없이 지정된 위치를 유지합니다.
- 적용하기 버튼을 누르면 bottom : 0 속성과 같이 적용됩니다.
- 그 결과 화면 하단으로 새들이 내려와 앉게됩니다. ^^;
- 이 새들은 스크롤을 하더라도 항상 같은 자리를 유지합니다.
- bottom 0 위치에 고정되어 있게됩니다.

참고 : bottom

네이버 웹툰에 리모콘 이런것이 있는데요 position : fixed 를 사용한 것입니다.

* 웹툰 링크 - 링크로 가셔서 오른쪽에 리모콘을 찾아보세요 ^^

연구 1
position : fixed 와 jQuery 를 이용한 하단 고정 메뉴
보기

소스
<style type="text/css">
    .css_test {
        background : #efefef;
        bottom : 0;
        display : none;
        left : 0;
        padding : 10px;
        position : fixed;
        text-align : center;
        width : 100%;
        z-index : 10;
    }
    .css_test img {
        height : 120px;
    }
</style>

<button type="button" onclick="$('.css_test').slideDown()">눌러 보세요 ^^</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/210A014854D735142C" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C" />
    <img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" />
    <img src="https://t1.daumcdn.net/cfile/tistory/22743938550B923803" />
    <img src="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" />
    <br><button type="button" onclick="$('.css_test').slideUp()">닫기</button>
</div>
설명
- "제이쿼리 공작소" 오픈후에 상세히 다루겠습니다. ^^*