---

POSITIONING PROPERTIES

Box Positioning {position: # }
    #=absolute     depends on the parent coordinate system.
    #=relative     depends on the default flow of the document.
    #=static     default positioning

Specify Left Position {left: # }
Specify Top Position {top: # }
Specify Right Position {right: # }
Specify Bottom Position {bottom: # }
    #=length (px, pt, in, cm, em), %, auto

Absolute Positioning

<DIV STYLE="position:absolute; left:0; top:0">
Today is fine.
</DIV>
<DIV STYLE="position:absolute; right:0; bottom:0">
Tomorrow will be fine.
</DIV>

Relative Positioning

<DIV STYLE="position:relative; left:0; top:0">
Today is fine.
</DIV>

Cascading Positioning

<DIV STYLE="position:relative; left:0; top:0; height:100; width:100;
 border-style:solid">
Today is fine.<BR>
<IMG SRC="heno01.gif" STYLE="position: #; left:#; top:#">
Tomorrow will be fine.<BR>
</DIV>

position:ablolute; left:0; top:0 Today is fine. Tomorrow will be fine.

position:relative; left:0; top:0 Today is fine. Tomorrow will be fine.

position:ablolute; left:20; top:20 Today is fine. Tomorrow will be fine.

position:relative; left:20; top:20 Today is fine. Tomorrow will be fine.

{clip: rect(#top #right #bottom #left) }
    #=length (px, pt, in, cm, em), auto

<DIV STYLE="position:relative; left:0; top:0; 
 width:100; background:yellow">
<IMG SRC="heno01.gif" STYLE="position:absolute; clip:#">
</DIV>

{overflow: # }     #=visible, hidden, scroll, auto

<DIV STYLE="height:100; width:100; border-style:solid; overflow:#">
Today is fine....Today is fine.
</DIV>

{overflow-x: # }
{overflow-y: # }     #=visible, hidden, scroll, auto

<DIV STYLE="height:100; width:100;
 border:solid; overflow-x:scroll">
<NOBR>Today is fine....</NOBR>
</DIV>

<DIV STYLE="height:100; width:100;
 border:solid; overflow-y:scroll">
Today is fine....
</DIV>

{z-index: # }     #=integer, auto

<DIV STYLE="position:relative; left:0; top:0;
 height:100; width:100; border-style:solid">
Today is fine.<BR>
Tomorrow will be fine.<BR>
<IMG SRC="heno01.gif" STYLE="position:absolute;
 left:0; top:0; z-index:#">
</DIV>

{z-index:auto}

Today is fine. Tomorrow will be fine.

{z-index:-1}

Today is fine. Tomorrow will be fine.

{visibility: # }     #=visible, hidden, inherit

HELLO
<DIV STYLE="position:relative; left:0; top:0;
 height:100; width:100; border-style:solid; visibility:#">
Today is fine.<BR>
Tomorrow will be fine.<BR>
</DIV>
BYE

{display: # }     #=none

HELLO
<DIV STYLE="width:100; border-style:solid; display:#">
Today is fine.<BR>
Tomorrow will be fine.<BR>
</DIV>
BYE

{display: # }     #=block, inline, list-item

<SPAN STYLE="display:block">
Hello.
</SPAN>
Today is fine.

<DIV STYLE="display:inline">
Hello.
</DIV>
Today is fine.

<DIV STYLE="display:list-item">
Hello.
</DIV>
Today is fine.

Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading | Font | Text | List | Color & Background |
Box | Box Positioning | Other|
Style Property LIST


Network Communication Design - http://www.ncdesign.org/
Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org