Get Adobe Flash player
דף הבית עבודה עם div מיקום מוחלט

הגדרת רוחב, גובה ומיקום לתג <div>, הופכים אותו ל"כלי אכסון" נוח לכל תוכן הנדרש בדף ה HTML.

שימוש מושכל בתכונות השונות מאפשר שימוש ב-<div> ככלי לחלוקת המסך לצורכי עיצוב, ככלי שיחליף את השימוש בטבלאות.

 

דיב במיקום מוחלט

מאפיין הבסיסי בשימוש ב div הוא ה- position. ראשית נדון בתכונת המיקום המוחלט posiotion: absolute

בדוגמא שלפנינו, מוצב div שנתוניו מוגדרים בהגדרות ה css הבאות:

#box {

position: absolute;
top: 200px;
left: 400px;
width: 200px;
height: 150px;
border: 1px solid #2f4851;
background-image: URL('images/site/back4.jpg');
padding: 5px 10px 5px 10px;
}

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

עומק הדיב

למוחלטות זו של הדיב יש כמה משמעויות:

אם מיקומו קבוע ומוחלט, מה קורה לטקסטים או תמונות שנמצאים שם בגלל זרימת ה-HTML הרגילה? 

התשובה ברורה ופשוטה: הדיב ידרוס ויסתיר כל מה שנמצא באותו מקום.

ומה קורה עם יש שני דיבים מוחלטים העולים אחד על השני? מי יהיה העליון ומי התחתון? לשאלה זו ניתן פתרון באמצעות המאפיין z-index. ככל שהערך הניתן למאפיין יהיה גבוה יותר, כך יהיה גם הדיב. 

דיב שערך ה-z-index שלו הוא 0 יהיה מתחת לדיב שערך ה-z-index הוא 1

ייחודיות הדיב המוחלט

דיב במיקום מוחלט חייב לקבל סט הוראות CSS הייחודי לו, שאם לא כן, כל דיב שישתמש באותו כלל CSS יופיע באותו מיקום בדיוק ויסתיר את הקודם לו. זו הסיבה לכך ששם הבורר מסומן ב # ולא בנקודה, ודרך הקריאה לו תהיה באמצעות id ולא ב-class.

בייחודיותו זו של הדיב, ניתן לנצל באמצעות כלים של ג'אווה סקריפט. ממקמים שני דיבים בעלי גודל זהה, במיקום אחד. ערך ה-z-index שלהם קובע מי נראה ומי מוסתר. באמצעות הסקריפט מחליפים את ערך ה-z-index וכך אפשר למתג - מי יופיע ומי יוסתר.

מירכוז דיב מוחלט

בעייה שאין לה תשובה באמצעות פקודה - היא מירכוז הדיב לאמצע רוחב המסך. בעת שהשתמשנו בטבלאות, הוספנו את התכונה align="center" לתג ה-<table> והיא התמרכזה. שימוש זהה בתג ה-<div>, ימרכז את תוכן הדיב ולא את הדיב עצמו.

הבעייה: הסטת הדיב באמצעות המאפיין :50%left תסיט את צידו השמאלי של הדיב למרכז המסך. אבל במצב זה, מרכז הדיב יהיה ימינה ממרכז המסך, וצריך "להחזיר" אותו שמאלה במידת חצי מרוחב הדיב.

איך עושים את זה? ע"י שימוש במאפיין margin. אם הסטנו את הדיב שמאלה ב-50%, נקבע ל margin-left את הערך של חצי רוחב הדיב. לדוגמא:

 

#box {
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
width: 200px;
height: 150px;
}

הדיב שיווצר, יהיה ברוחב 200 פיקסלים, ויוצב באמצע רוחב המסך, ללא תלות בגודל או סוג הצג.

 

<div> במיקום מוחלט

הדיב לא מתחשב בסדר התנועה הרגיל של ה HTML ומוצב במקום שהוגדר לו - בין אם הוא דורס אלמנט אחר שנמצא שם, ובין אם לאו.