روش هاي تعيين موقعيت در CSS
تعيين موقعيت مناسب عناصر در صفحات وب يك ضرورت براي طراحي چيدمان خوب است. روش هاي مختلفي در CSS وجود دارد كه مي توانيد از آنها براي تعيين موقعيت عناصر استفاده كنيد.
در بخش زير روش هاي تعيين موقعيت را يكي يكي توضيح خواهيم داد.
۱- موقعيت ايستا
يك عنصر با موقعيت Static يا ايستا هميشه مطابق با جريان عادي صفحه قرار مي گيرد. در پيش فرض HTML، عناصر به صورت ايستا قرار مي گيرند. عناصر ايستا تحت تأثير ويژگي هاي top، bottom، left، right ( بالا، پايين، چپ، راست) و z-index قرار نمي گيرند.
مثال
.box {
padding: 20px;
background: #7dc765;
}
۲- موقعيت نسبي
يك عنصر با موقعيت Relative يا نسبي، نسبت به موقعيت عادي و فعلي خود موقعيت دهي مي شود.
در طرح موقعيت يابي نسبي موقعيت جعبه عنصر با توجه به جريان عادي محاسبه مي شود. سپس جعبه با توجه به ويژگي هاي top ياbottom و left يا right از موقعيت فعلي خود جابه جا ميشود.
مثال
.box {
position: relative;
left: 100px;
}
توجه: يك عنصر با موقعيت نسبي مي تواند جابه جا شود و با ساير عناصر همپوشاني پيدا كند، اما فضاي اصلي آن در جريان عادي صفحه حفظ مي شود.
۳- موقعيت مطلق
يك عنصر با موقعيت مطلق ياAbsolute نسبت به عنصر والد اول آن كه موقعيتي غير از استاتيك دارد، موقعيت دهي مي شود. اگر چنين عنصري پيدا نشد، روي صفحه نسبت به گوشه بالا-چپ پنجره مرورگر، موقعيت دهي مي شود. فاصله هاي ديگر جعبه را مي توان با استفاده از يك يا چند ويژگي top، bottom، left و right مشخص كرد.
عناصر با موقعيت Absolute كاملاً از جريان عادي صفحه خارج مي شوند. بنابراين هنگام قرار گيري در مكان عناصر ديگر، هيچ فضايي را اشغال نمي كنند، اما مي تواند براساس مقدار ويژگي z-index با عناصر ديگر هم همپوشاني داشته باشد. همچنين، يك عنصر با موقعيت Absolute مي تواند انواع margin را داشته باشد و با margin هيچ عنصر ديگري ادغام نشود.
مثال
.box {
position: absolute;
top: 200px;
left: 100px;
}
۴- موقعيت ثابت
موقعيت Fixed يا ثابت زير مجموعه اي از موقعيتabsolute است.
تنها تفاوت اين است كه يك عنصر با موقعيت ثابت با توجه به ميدان ديد يا نقطه نمايش مرورگر ثابت مي شود و هنگام پيمايش حركت نمي كند.