position Property

Home > Document > CSS > Positioning > position

페이지 목차

position Property

position Property는 DHTML 을 하기 위한 핵심적인 Property 중에 하나입니다. position 이라면 우선 Social position 이라고해서 사회적 지위(위치)라는 말을 자주 쓰지 않습니까. 저한테는 그런게 별로 없습니다만... CSS position도 같은 뜻으로서 문서에서의 위치를 말함이져...즉 , 다른 사람들하고 같은 줄에 서 있는 위치(static position), 자신만의 확고한 위치(absolute position), 다른 사람과의 상대적인 위치(relative position) 머 이런 것 들을 말하는 겁니다.

이런 가정을 함 해보져. width 200px, height 200px 크기의 Box를 만들어서 브라우저 창의 상단에서 50px, 좌측에서 50px 떨어진 위치에 Box의 좌측상단을 위치 시킨다던지 같은 위치에 여러개의 그림을 겹쳐 놓는다. 사실상 지금까지의 배운 Property들 만으로는 거의 불가능합니다. 그렇지만 position Property를 사용하면 이런 일은 그야말로 식은 죽 먹기로 할 수 있습니다.

[표 보는 방법]

position Property
Value	static \| relative \| absolute \| fixed \| Inherit
Initial	static
Applies to	all elements, but not to generated content
Inherited	no
Percentages	N/A
Media	Visual
HTML Syntax	{ position: sPosition }
Scripting	object.style.position [ = sPosition ]

position Proeprty의 value

static
Default 값으로 HTML 문서의 문단에서 처럼 일반적인 내용물들의 흐름을 말합니다. 상단(top)과 좌측(left) 에서의 거리를 지정할 수 없습니다.
relative
HTML 문서에서의 일반적인 내용물들의 흐름을 말하지만 상단(top)과 좌측(left) 에서의 거리를 지정할 수 있습니다.
absolute
자신의 상위 Box 속에서의 top, left, right, bottom 등의 절대적인 위치, 즉 변하지 않는 위치를 지정할 수 있습니다.
fixed
고정 시킨다는 뜻인데, scroll이 일어나도 항상 화면상의 지정된 위치에 있는다고 되어있습니다만... *작동하지 않습니다. Netscape 에서 작동 한다는군요.

CSS Scripting

onMouseOver="this.style.position='absolute';"

positioning 을 할 수 있는 조건

positioning을 할 때 top과 left를 지정할 수 있는 경우는 { position : relative } 와 { positin : absolute }의 두 가지 경우라고 위에서 설명했지만, 아무 때나 positioning이 되는 것은 아닙니다. 어떤 object(DIV SPAN P등과 같이 눈에 보이는)에 top과 left를 지정할 수 있는 경우는 그 물체가

최상위 Element인 body의 바로 한 단계 하위 element인 경우
body가 한 단계 상위가 아닐 경우에는 자신의 한 단계 상위 Element에 positioning이 되어 있을 경우

이렇게 2 가지 조건이 성립되어야 top과 left를 지정할 수 있습니다.

브라우저 에서의 X, Y 좌표

이 사이트가 수학을 배우는 사이트도 아닌데 잘 나가다가 웬 '좌표'? 라고 생각하겠지만 그냥 X(가로)와 Y(세로)에 대해서 얘기하려고 하는 겁니다. XY염색체도 아니고 그냥 X 와 Y... 일반적으로 수학에서는 오른쪽이 (+) 방향이고, 위쪽이 (+)방향이지만 브라우저에서는 Y 방향이 뒤바뀌어 있습니다. 즉 Y의 (+)방향이 아래 쪽이라는 말입니다. 따라서 X, Y의 (+) 값이 증가 할수록 우측 하단 방향으로 멀어지게 되는거져... 따라서 (-) 값도 사용가능하며 크기의 제한도 없습니다.

문장에서의 positioning

아무런 지정을 하지 않을 경우 문장 속에 text들은 모두 static 상태입니다. 첫 번째 예제는 '여러분! 행복 하십니까? 생활은 많이 나아지셨습니까?' 라는 문장에서 '행복 하십니까?' 가 최초에 static 상태에서 상대적(relative)으로 왼쪽으로 3pixel(-3px), 위쪽으로 3pixel(-3px) 움직이거나, 절대적(absolute)위치인 브라우저 창 좌측 상단에서 아래로 50pixel(50px), 오른쪽으로 50pixel(50px) 움직이는 DHTML을 만들어 보겠습니다.

positioning DHTML

여러분! 행복 하십니까? 생활은 많이 나아지셨습니까?

static

relative

absolute

소스 보기

입력

<HTML>
    <HEAD>
        <TITLE>positioning</TITLE>
    <STYLE type="text/css">
    <!-- 
    .sta{position:static;}
    .rel{position:relative; top:-3px; left:-3px;}
    .abs{position:absolute; top:50px; left:50px;}

    .td_button{
    height:18px;
    background-color:royalblue;
    border:2px outset #666666;
    cursor:hand;
    font-size:11px;
    color:#EFEFEF;
    text-align:center;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P style="position:absolute;">여러분! 
            <SPAN id="span_1">행복 하십니까?</SPAN> 
            생활은 많이 나아지셨습니까?
        </P>
        <BR><BR><BR><BR>

        <TABLE width="100%" style="table-layout:fixed;">
          <TR>
            <TD class="td_button" onClick="span_1.className='sta';">static</TD>
            <TD class="td_button" onClick="span_1.className='rel';">relative</TD>
            <TD class="td_button" onClick="span_1.className='abs';">absolute</TD>
          </TR>
        </TABLE>
    </BODY>
</HTML>

DHTML 에 대한 설명

위의 DHTML에서 relative는 '행복 하십니까?' 가 좌상 방향으로 약간(3px) 움직이지만 absolute 를 선택하면 '생활은 많이 나아지셨습니까?' 가 왼쪽의 '여러분!'에 가서 붙는 게 보이져? absolute로 positioning 을 하면 원래 그렇습니다. 원래 어떻냐 하면 W3C의 메뉴얼을 보면

A absolutely positioned containing block generated by body element is no longer "body" but initial containing block.

라고 되어있습니다. 즉, 절대 위치(absolute)로 positioning되고 top과 left로 위치를 지정한 물체의 한 단계 상위 Element가 최 상위 Element인 <body> 일 경우 그 물체는 더 이상 body 가 아니라 독립적인 또 하나의 최상위 containing block이 된다는 뜻으로 해석하면 되겠습니다. 이 말은 독립된 물체가 브라우저 상의 위치에 있어서 body와 따로 논다는 뜻입니다. 그렇기 때문에 '행복 하십니까?' 가 absolute로 positioning 되면서 body에서 떨어져 나가는 순간 '생활은 많이 나아지셨습니까?' 가 왼쪽으로 붙어 버린거져. 왜냐 하면 absolute로 Positioning된 물체는 다른 물체와 따로 놀게 되었으니까요. 물론 글씨 크기(font-size), 글씨색(color)등 다른 요소는 상속을 받고, 위치만은 따로 논다는 뜻입니다. 실험을 해 보기 위해서 아래와 같이 Coding하고 브라우저로 츨력해 봅시다.

입력

.
.
<BODY>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <P style="position:absolute; top:10px; left:10px;">
    여러분! 행복 하십니까? 생활은 많이 나아지셨습니까?
    </P>
</BODY>
.
.

어떻습니까? <BR> Tag이 <P> Tag 위에 있지만 조금도 동요됨 없이 꿋꿋하게 자기 자리를 지키고 있지 않습니까? 정권 교체되면 자동으로 여당되는 인사들도 쩜 이랬으면...

absolute positioning을 이용한 그림자 효과

그래픽을 이용하지 않고서도 그림자 효과 정도는 충분히 낼 수 있습니다. 사실 저는 개인적으로 그래픽을 잘 못합니다. 그렇지만 어떤 시각적인 효과에 관심이 없는 건 아니져. 이가 없으면 잇몸으로 산다고 자꾸 다른 방법을 생각하다보니 이런 식으로 효과를 내기도 합니다. 여기를 클릭해 보시져... 누가 입이 찢어져라 웃고 있네요...^^

더 많은 예제가 있지만 위의 web design 메뉴가 열리면 거기서 다루겠습니다.

Top

Back

New

검색