CSS position relative 속성

안녕하세요  저번에는 css 속성중 float 속성에 관하여 알아봤습니다.

layout을 담당하는 속성이었죠. 

float 속성 알아보기

float과 비슷하게 구성과 배치를 결정하는 속성중 position 속성이 있습니다.

float:left 속성을 사용하게되면 선택자를 띠어서 배치를 할수 있습니다,

위와 같이 띠우는게 가능합니다.

하지만 위의 구조에서 position 속성을 첨가하게 되면 조금더 세련되게 위치를 배치할 수 있습니다. 

position으로 엘리먼트의 위치를 결정하는 방식을 지정하면 다음 4가지 종류가 있습니다.

이번에는 static 속성과 relative 속성을 알아보겠습니다.

첫번째로 static 속성입니다.

이 값은 디폴트 값이면 등장 순서대로 차례대로 배치됩니다.

static으로 지정되면 좌표 지정 값인 top, left, right, bottom 등을 지정할 수 없습니다.

두번째로 relative 속성입니다. 

이 값은 정상좌표에서 위치값(top, left, right, bottom)이 지정한 거리만큼 상대적으로 이동 합니다. 

사

랑

합

니

다

◆  html 코드  ◆

<div id="wrap"><div class="red">사</div>

<div class="green">랑</div>

<div class="blue">합</div>

<div class="yellow">니</div>

<div class="black">다</div>

 </div>

◆  css 소스  ◆

#wrap{width:1000px; height:auto; margin:auto; }

#wrap > div{width:100px; height:100px; font-size: 70px; color:white; }

.red{background-color:red; float:left;

     position:relative; left:250px;  top:50px; z-index:3}

.green{background-color:green; float:left;

     position:relative; left:250px; top:80px; z-index:3}

.blue{background-color:blue;clear:both;

     position:relative; left:170px; top:100px; z-index:3}

.yellow{background-color:yellow; float:left;

     position:relative; left:250px; top:-40px; z-index:3}

.black{background-color:black; float:left;

     position:relative; left:280px; top:20px; z-index:3}

이렇듯 relative 속성은  position:relative 을 지정후 위치값으로 자연스러운 배치가 가능합니다. 

 position:absolute 속성 알아보기