Källkoden för /anders.enges/css/css7.asp

---

<!--#include file="../inc/navstuff.asp" -->
I vanlig html kommer texten och bilderna att komma på den plats de
blivit insatta i html koden. <p>
CSS tillåter oss att placera in element friare på sidan.<p>
Till vår hjälp har vi följande CSS egenskaper:<p>

<TABLE border="0" cellpadding="5" cellspacing="2">
<TR align="LEFT" valign="MIDDLE" bgcolor="DCDCDC">
<TD><B>Egenskap</B></TD>
<TD><B>Förklaring</B></TD>
<TD><B>Alternativ</B></TD>
<TD><B>Gäller för</B></TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">position</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Gör att man kan positionera element. Om denna egenskap inte är satt kan inget av de nedanstående användas</TD>
<TD bgcolor="#EEEEEE" align="LEFT">absolute<br>relative<br>static</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Alla element</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">left</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Vänster position</TD>
<TD bgcolor="#EEEEEE" align="LEFT"><I>längd</I><br><I>procent</I><br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Endast för position:absolute eller position:relative</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">top</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Top positionen för elementet</TD>
<TD bgcolor="#EEEEEE" align="LEFT"><I>längd</I><br><I>procent</I><br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Endast för position:absolute eller position:relative</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">height</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Höjden på elementet</TD>
<TD bgcolor="#EEEEEE" align="LEFT"><I>length</I><br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">DIV, SPAN</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">width</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Bredden</TD>
<TD bgcolor="#EEEEEE" align="LEFT"><I>längd</I><br><I>procent</I><br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">DIV, SPAN</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">visibility</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Synlig eller osynlig</TD>
<TD bgcolor="#EEEEEE" align="LEFT">visible<br>hidden<br>inherit</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Alla element</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">z-index</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Om flera element överlappar varandra bestämmer detta ordningsföljden</TD>
<TD bgcolor="#EEEEEE" align="LEFT">auto<br><I>heltal</I></TD>
<TD bgcolor="#EEEEEE" align="LEFT">Endast för position:absolute eller position:relative</TD>
</TR>

<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">clip</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Synlig yta på ett element</TD>
<TD bgcolor="#EEEEEE" align="LEFT"><I>shape</I><br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Alla element</TD>
</TR>
<TR align="LEFT" valign="TOP">
<TD bgcolor="#EEEEEE" align="LEFT">overflow</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Om det är "för mycket" i ett element, hur skall det hanteras</TD>
<TD bgcolor="#EEEEEE" align="LEFT">visible<br>hidden<br>scroll<br>auto</TD>
<TD bgcolor="#EEEEEE" align="LEFT">Alla element</TD>
</TR>
</TABLE>
<p>
<b>position:absolute</b><p>
Detta är den enklaste att använda så jag tar bara upp denna. <p>
Ett absolut positionerat element följer inte dent "normala" textflödet i texten
utan placeras in på en fix plats. De kan evetuellt överlappa andra element<p>
Nedan finns ett exempel på en text som placerats in 60 pixels frän vänster och 16 pixels från toppen<p>
<p>
<div class="code">
<SPAN<br>
    STYLE="position:absolute; <br>
    top:60px; <br>
    left:60px;<br>
    background-color:#ADD8FF"<br>
    ><br>
    Text text text text text text text text text<br>
    text text text text text text text text text<br>
</SPAN><br>
</div>
<!--#include file="../inc/footer.asp" -->