본문 바로가기
css

[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

by 지구별에 2014. 4. 1.
반응형

 

 

[html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

 

지난 시간엔 float 속성을 배웠는데요, float는 객체를 오른쪽 또는 왼쪽으로 정렬해서

 

레이아웃을 배치할 때 유용하다고 했습니다.

 

 [css 기초] float 속성에 대하여

 

 

 

오늘 배울 position 역시 레이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성 입니다 

 

*position 속성은 상속되지 않음*

 

 

 position: static 

 

position: static은  초기값으로 위치를 지정하지 않을 때와 같습니다

 

보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 합니다.

top, bottom, left, right 속성값이 적용되지 않습니다.

 

우선 position: static 설정 할 때 html과 실행화면을 보겠습니다.

 

static.htm

 

 <html>
<head>
<style type="text/css">
#static1
{
width:100px;
height:100px;
background-color:green;
position: static;
}

#static2
{
width:100px;
height:100px;
background-color:yellow;
position: static;
}
#static3
{
width:100px;
height:100px;
background-color:red;
position: static;
}
</style>
</head>

<body>
<div id="static1">
1. static
</div>
<div id="static2">
2. static
</div>
<div id="static3">
3. static
</div>
</body>
</html>

 

 

[position: static 실행화면입니다]

float 설정하지 않은 div는 아래처럼 정렬됩니다

position: static 설정 전과 후는 따라서 같습니다...

 

주의: html문서 body에 margin:0, padding:0을 따로 지정하지 않으면 아래 화면처럼

공간(파란색 부분)이 있습니다. 뒤에서 다룰 relative도 마찬가지임...

 

 

 

 position: relative

 

position: relative은  위치 계산을 할 때 static의 원래 위치부터 계산합니다.

 

위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수도 있습니다.

 

사용 예:

 

#relative

{

position: relative;

}

 

#relative2

{

position: relative;

top: 0px'

left: 100px;

}

 

html 작성을 해 보겠습니다...

 

relative.htm

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#static
{
width:100px;
height:100px;
background-color:green;

position: static;
}

#relative2
{
width:100px;
height:100px;
background-color:yellow;
position:relative;
top:0px;
left:100px;
}
#relative3
{
width:100px;
height:100px;
background-color:red;
position:relative;
top:0px;
left:200px;
}
</style>
</head>

<body>
<div id="static">
1. static
</div>
<div id="relative2">
2. relative
</div>
<div id="relative3">
3. relative
</div>
</body>
</html>

 

[position: relative 실행 화면입니다]

 position: static 실행 화면을 같이 참조해주세요.

2번 노란 사각형은 원래의 위치에서 위 0px, 왼쪽 100px

3번 빨간 사각형은 원래의 위치에서 위 0px, 왼쪽 200px으로 지정한 것입니다.

 

 

 

 

 

 position: absolute

 

position: absolute은 relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있습니다.

하지만  가장 가까운 상위 요소를 기준으로(단, static은 제외) 위치가 결정됩니다.

상위 요소가 없으면 위치는 html를 기준으로 설정됩니다.

 

 

relative와 마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수 있습니다

 

사용 예:

#absolute

{

position: absolute;

top: 0px'

left: 100px;

}

 

absolute.htm

 

 

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
#static
{
width:100px;
height:100px;
background-color:green;

position: static;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top: 0px;
left:100px;
}
#absolute3
{
width:100px;
height:100px;
background-color:red;
position:absolute;
top: 0px;
left: 200px;
}
</style>
</head>

<body>
<div id="static">
1. static
</div>
<div id="absolute2">
2. absolute
</div>
<div id="absolute3">
3. absolute
</div>
</body>
</html>

 

 [position:absolute 실행화면입니다]

 

1. static, 2. absolute(top 0px left 100px) 3 absolute(top 0px left: 200px)로 설정함

absolute는 static이나 relative와 다르게 바깥 쪽에 공간이 생기지 않습니다

 

 

 

 

위에서 absolute는 상위 요소를 기준으로 위치가 결정된다고 했습니다.

이번엔 상위에 div를 만들고 그 안에 absolute 2개를 넣어 보겠습니다.

 

1. relative(top 100px left 100px) 2. absolute(top 0px left 100px) 3. absolute(top 0px left 200px)로 설정함

 

reab.htm

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#relative
{
width:300px;
height:300px;
background-color:green;
position: relative;
top: 100px;
left: 100px;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top:0px;
left:100px;
}
#absolute3
{
width:100px;
height:100px;
background-color:red;
position:absolute;
top: 0px;
left: 200px;
}
</style>
</head>

<body>
<div id="relative">
<div id="absolute2">
2. absolute
</div>
<div id="absolute3">
3. absolute
</div>
</div>
</body>
</html>

 

실행하면, relative(녹색) 안에 설정된 absolute는 녹색 부분으로부터 시작해서 위치가 결정됨을 알 수 있습니다.

 

 

 

 

 

 position: fixed

 

position: fixed 브라우저 화면의 상대 위치입니다.

 

따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있습니다.(상위 요소에 영향을 받지 않음)

 

마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치도 같이 설정할 수 있습니다.

 

IE7, IE8은 position: fixed 값이 적용되지 않으므로  문서 타입을 규정해주어야 합니다.

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

사용 예:

#fixed

{

position: fixed;

right: 100px'

bottom: 100px;

}

 

 

fixed.htm

 

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
#relative
{
width:300px;
height:300px;
background-color:green;
position: relative;
top: 100px;
left: 100px;
}

#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top:0px;
left:100px;
}
#fixed3
{
width:100px;
height:100px;
background-color:red;
position:fixed;
top: 0px;
right: 200px;
}
</style>
</head>

<body>
<div id="relative">
<div id="absolute2">
2. absolute
</div>
<div id="fixed3">
3. fixed
</div>
</div>
</body>
</html>

 

 

 

[position: fixed 실행화면입니다]

 

상위 요소를 설정했는데도 fixed는 그에 영향 받지 않고 위치를 결정할 수 있습니다.

 

웹페이지에서 항상 따라다니는 광고나 공지가 바로 이 fixed를 설정한 객체입니다.

 

1. relative(top 100px left 100px) 2. absolute(top 0px left 100px) 3. fixed(top 0px right 200px)로 설정함

 

 

 

 

오늘은 position으로 레이아웃을 배치하는 법을 배워보았는데요,

 

다음 시간에는 여러 객체가 겹칠 때 어느 객체가 앞으로 나올지 결정하는 속성 z-index를 배워 볼게요

 

 

 

[html/css] z-index 속성으로 배치 순서 결정하기

 

[css] - DIV 태그를 이용하여 레이아웃 만들기

 

[css 기초] float 속성에 대하여

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

반응형

댓글11

  • 함상원 2014.08.31 21:30

    퍼블리셔의 매력에 빠져서 학원을 다니고 있는 학생입니다. 요즘 마크업을 하고 있는데

    position속성 부분에서 멘붕이 되어 정보를 찾던중에 이런 보물 창고를 알게 되었네요!!

    덕분에 정말 잘 이해하고 배워갑니다. 감사합니다~!

    앞으로 자주 들리게 될것 같네요^^; 자주 찾아뵙겠습니다~






    답글

  • HANS 2014.09.19 07:54

    아주 적절한 예를 사용해서 설명이 쉽군요. 감사합니다~
    답글

  • 좋습니다 2014.12.02 17:15

    이해 가기 쉽게 설명이 되었있어서 좋습니다.
    답글

  • 애청자 2014.12.17 12:45

    안녕하세요. 워드프레스로 본격적으로 홈피를 만들고 있는데 수십 수백군데 국내외 포럼, 심지어 책을 여러권 봤음에도 이렇게 초보자한테 쉽게 할 수 있는 자료는 처음 입니다. 저처럼 아무것도 모르는 사람한테 너무나 고마운 정보들입니다. 어제부터 글들 쭉 보면서 적용하고 있는데 너무 큰 도움을 받고 있어 그냥 가는것도 예의가 아닌거 같아 감사 글 남깁니다. 광고라도 있으면 몇 번 눌러드리고 싶네요 ㅎ 감사합니다. 잘 활용하겠습니다.
    답글

    • 지구별에 2014.12.17 13:20 신고

      ㅎㅎ 과찬이시네요. 읽고 답글 남겨주시는 것만으로도 저에게 큰 힘이 됩니다. 저도 배우면서 쓰는 것이라... 제가 이해할 수 있는 방식으로 쓰려고 노력하고 있어요. 감사합니다^^

    • 애청자 2014.12.17 13:42

      마침 계시는군요. 지금 며칠째 고민하며 잘 안되는게 있는데 div나 table로 해도 그렇고 올리신 글대로 다 해봐도 a href가 들어간 이미지가 두개가 병렬로 한 줄에 배치가 안되네요. 계속 두번째 이미지는 첫번째 이미지 하단에 위치하게 되고 있습니다. airbnb.co.kr 에서 처럼 큰 div 폭을 정해 놓고 그 안에 이미지를 병렬로 좌 우로 배치하려 하는데.. 혹시 이유를 알 수 있을까요? 감사합니다.

    • 지구별에 2014.12.17 15:52 신고

      우선 div 너비+패딩+마진 크기가
      그 안에 들어가는 이미지 두개의 너비보다 큰지 확인해주셔야 할 것 같습니다
      관련글 박스 모델http://aboooks.tistory.com/admin/entry/post/?id=199 보시면 도움 되실 것 같아요

  • 상사꽃 2016.07.12 12:20 신고

    싸이월드 블로그 폭망하고 티스토리로 이사하기로 마음먹고
    레이아웃부터 잡는데 한참 애를 먹고 있었는데...
    윗분 말따라 다른 사이트는 이게 뭔소리지? 인데 드디어 여기와서 확실히 개념을 잡네요.
    감사합니다. ㅠㅠ
    답글