top, left, bottom, right Property

이 Property들은 자신이 담겨있는 Box 속에서의 top, left, bottom, right에서의 거리를 지정하는 Property들 입니다. body Tag에 직접 지정하면 top, left만 작동하고 bottom, right는 작동하지 않습니다. 하지만 body가 아닌 DIV같은 Box 속에 담겨있는 물체일 경우 top, left, bottom, right 모두 작동하며, length와 percentage 모두 사용 가능합니다.

아래의 예제는 가로, 세로 100pixel 크기의 Box를 widht 100%, height 400pixel 크기의 DIV Box 속에 넣고 top, left, bottom, right를 각각 50pixel 씩 띄운 예제입니다.

입력

<HTML>
    <HEAD>
        <TITLE></TITLE>
    <STYLE type="text/css">
    <!-- 
    .side{
    position:absolute; 
    border:1px solid #333333;
    width:100px;height:100px;
    text-align:center;
    }    

    .output{
    width:100%;
    background:#dfdfdf;
    font:11px/1.6em Verdana;
    padding:10px;
    text-align:justify;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <DIV class="output" style="height:400px;position:relative;">
            <DIV class="side" style="bottom:50px; right:50px; background-color:palegreen;">
            bottom:50px; right:50px;
            </DIV>
            <DIV class="side" style="top:50px; right:50px;background-color:gold;">
            top:50px; right:50px;
            </DIV>
            <DIV class="side" style="bottom:50px; left:50px;background-color:tomato;">
            bottom:50px; left:50px;
            </DIV>
            <DIV class="side" style="top:50px; left:50px;background-color:royalblue;">
            top:50px; left:50px;
            </DIV>
        </DIV>
    </BODY>
</HTML>