לדלג לתוכן

CSS/מיקום

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
< CSS

ישנם שני סוגים של מיקום:

  • מיקום מוחלט.
  • מיקום יחסי.

מיקום מוחלט מסמנים כך: position: absolute;. מיקום יחסי מסמנים כך : position: relative;.

המוחלט והיחסי

[עריכה]

המיקום המוחלט והמיקום היחסי הם די דומים , שניהם מצויינים ע"י אותה שורת קוד , אך ההבדל העיקרי הוא חישוב המקום. האופן שבו המחשב מחשב את המיקום באופן "מוחלט" הוא להניח את האלמנט במקום המצויין ללא בעיות.

האופן שבו ה "יחסי" מחשב , הוא ע"י אופן יחסי מהמיקום המקורי במסמך. הדבר היחידי שצריך לעניין אתכם הוא הבחירה. בדרך כלל מעדיפים להשתמש במיקום המוחלט, כי הוא יותר קל. אך, ישנם מקרים שבהם היחסי יהיה עדיף על המוחלט.

הכל תלוי במקרה.

שורת הקוד - מוחלט

[עריכה]
#two {
position: absolute;
top: 180px;
left: 70px;
}

שורת הקוד - יחסי

[עריכה]
#three {
position: relative;
top: 180px;
left: 70px;
}

אפשרויות מילוי

[עריכה]
  • top
  • right
  • left
  • bottom

דוגמא מלאה

[עריכה]
<html>
<head>
<style type="text/css">
p.revah
{
position:absolute;
top: 300px;
left: 500px;
}
</style>
</head>

<body>
<p>פיסקה זאת היא רגילה</p>
<p class="revah">פיסקה זאת ממוקדת</p>
<p>פיסקה זאת היא רגילה</p>
</body>

</html>


הפרק הקודם:
קישורים
מיקום הפרק הבא:
ריווח