01 CSS로 positioning하는 법을 배워보자 - posistion:static, relative

css로 positioning하는 법을 배워보자 - position:static

관련글

2013/03/11 - [Web개발/Web Standard] - 04 CSS로 Positioning하는 법을 배워보자 - float:left

positioning옵션은 크게 3가지이다.

static, relative, absolute.

css에 적용하는 방법은 아래와 같다.

position:static;

position:relative;

position:absolute;

static

#article01{

    position:static;
    width:100px;
    height:100px;
    background:#3E454C;
}

#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}

#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}

#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}

#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}

결과 화면.

이렇게 나온다.

아래 소스코드 '#article01'을 보자 위치를 top:20px; left:40px;라는 값을 주었다. 어떻게 변하는지 보자.

#article01{
    position:static;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:20px;
     left:40px;
}

#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}

#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}

#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}

#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
 

결과 화면.

이런.. 변화가 없다.

posistion:static 을 적용하면 시작 위치를 지정해 주어도 개체의 위치가 변하지 않는다.

relative

relative라는 단어는 '상대적인'이라는 뜻이 있다.

hello

아래 #article01을 보자. position:relative;를 적용했다. 

#article01{
    position:relative;
    width:100px;
    height:100px;
    background:#3E454C;
}

#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}

#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}

#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}

#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}

결과

일단은 static을 적용한 것과 똑같다.

그러면 객체의 시작 위치를 지정해보자.

#article01{
    position:relative;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:20px;
     left:40px;
}

#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}

#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}

#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}

#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}

결과 화면. static과 다르게 위치가 이동한 것을 볼 수 있다.

absolute

absolute는 적용하고자 하는 객체가 포함된 객체의 모서리 기준이다.

아래 소스코드의 #article01을 보자 position:absolute 를 적용했다

#article01{
    position:absolute;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:300px;
     left:500px;
}

#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}

#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}

#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}

#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}

section의 모서리 기준으로 300*500px 떨어진 위치에서 그려진다.

end.