כאשר רוצים למקם טקסט, משתמשים במאפיין position היכול לקבל את הערכים absolute או relative.
הערך absolute ימקם את הטקסט לפי הפרמטרים המצורפים, והאובייקטים הבאים אחר כך כל לא יתייחסו לאובייקט זה.
לעומת זאת relative ימקם את האובייקט בהסטה של top ו-left מהמיקום המתאים של האובייקט.
H5.tp{position:absolute;top:50;left:10;}
H5.ap{position:relative;top:50;left:10;}
במקרה הראשון, ימוקם הטקסט ליד הפינה השמאלית העליונה של הדף, ואובייקטים שנכתבו אחריו ימשיכו להיכתב במקום שבו היו צריכים להיכתב.
במקרה השני ימוקם הטקסט מעט למטה ומשמאל נקודה שבה היה צריך להיות ממוקם, ואילו האובייקטים שאחריו ימשיכו לזרום מהנקודה שבה האובייקט הסתיים.
השימוש ב position:absolute מאפשר בעצם כתיבה בשכבות. אפשר לכתוב משהו על גבי משהו אחר.
אם ראיתם תפריט הנפתח כאשר מעבירים את העכבר על אובייקט כלשהו, הרי זה משום שהתפריט היה ממוקם באופן אבסולוטי ותכונת ה-display שלו היתה none.
הנה דוגמה לטבלת קישורים כזו:
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1255">
<style type="text/css" title="">
a{color:white;background-color:
<style type="text/css" title="">
a{color:white;background-color:
green;}
ahover{color:green;background-color: white;}
a table{position:absolute;display:none;
ahover{color:green;background-color: white;}
a table{position:absolute;display:none;
margin-left:-10px;margin-right: -10px;
background-color:green;color:white;
}
table{background-color:orange;}
</style>
</head>
<body
table{background-color:orange;}
</style>
</head>
<body
dir=rtl lang=he>
<table>
<tr>
<td>
<a href="javascript:void();"
<table>
<tr>
<td>
<a href="javascript:void();"
id=a1
onmouseover="emaillinks.style.display='block';"
onmouseout="emaillinks.style.display='none';">הדואר
onmouseover="emaillinks.style.display='block';"
onmouseout="emaillinks.style.display='none';">הדואר
שלי
<table id="emaillinks" onmouseover="this.style.display='block';">
<tr><td><a
<table id="emaillinks" onmouseover="this.style.display='block';">
<tr><td><a
href="mailto:me@work.com">בעבודה</a> </td></tr>
<tr><td><a href="me@home.com">בבית</a>
<tr><td><a href="me@home.com">בבית</a>
</td></tr>
</table>
</a>
</td></tr>
</table>
</body>
</html>
</table>
</a>
</td></tr>
</table>
</body>
</html>
שימו לב לתכונות ה-CSS שנתתי לקישור, מעבר על קישור וטבלה הממוקמת בתוך קישור. טבלה שאינה ממוקמת בתוך תגית <a> תקבל רקע כתום.
כאשר עובדים בשכבות, יש אפשרות לשנות את סדר הופעתן. ננסה למקם שתי תמונות באותו מקום:
img.x{position:absolute;top:20;left:50;z-index:3;}
img.y{position:absolute;top:20;left:50;z-index:2;}
שימו לב שהתמונה ב-x תתייצב לפני ותסתיר את רעותה. גובה השכבה נקבע עם z-index ומאפשר למתכנת להבליט שכבה או לשים אותה מאחורי שכבה אחרת.
אם תחליפו את ה z-index של התמונה הראשונה ל- 1, יתחלפו התמונות והאחורית תעבור קדימה. ככל שהמספר גדול יותר, תתיצב השכבה בקידמה.
רשומות
אין תגובות:
הוסף רשומת תגובה