Positioning اين قابليت را به شما خواهد اعطا كرد تا حالت يك عنصر را در دكورا سيون شيت وبسايت گزينش نماييد . اين ويژگي به شما قابليت خواهد اعطا كرد طراحي سايت شركتي يك عنصر را بر روي موادسازنده ديگر قرار دهيد و يا اين كه گزينش نمائيد چه اتفاقي چهره دهد هنگامي محتواي يك عنصر بسيار پهناور باشد .با انتخاب عنصرها top , right , bottom , left مي‌توانيد حالت يك عنصر در كاغذ را انتخاب نمائيد . گزينش اين مقادير به تنهايي عمل ساز نخواهند بود و مي بايست نوع اين انتخاب شرايط نيز مشخص و معلوم خواهد شد .
انتخاب حالت عنصرها در شيت ( CSS Positioning ) دارنده چهار مقدار و طريق ( static , absolute , relative , fixed ) متعدد ميباشد كه در تحت به توضيح اين روشها و طرز به كارگيري از آن‌ها خوا‌هيم پرداخت .
گزينش شرايط ايستا ( Static )همگي عنصرها Html به طور پيش فرض دارنده نوع حالت ايستا ( static ) ميباشند . عنصرها با نوع شرايط ايستا به طورمعمول با دقت به جريان طبيعي ورقه و طرز قرارگيري موادسازنده در كنار يكديگر گزينش حالت مي گردد . خصوصيت top , right , bottom , left , z-index بر روي حالت اينگونه موادسازنده تاثيري ندارند و نمي‌توانند سبب تغييرمكان اين عنصر شوند.
چهار عنصر با نوع حالت static در كنار يكديگر قرار دارا هستند . همگي عنصرها به صورت پيش فرض دارنده نوع وضعيت static ميباشند
گزينش وضعيت اثبات ( Fixed Positioning )يك عنصر با نوع وضعيت اثبات ( fixed ) نسبت به پنجره مرورگر گزينش وضعيت شود . اين عنصر با تكان شيت به بالا و تحت و حتي چپ و راست ( scroll ) تغيير‌و تحول وضعيت نخواهد اعطا كرد . نوع شرايط اثبات عنصر را از جريان طبيعي كاغذ جداگانه خواهد كرد و حالت اين عنصر تاثيري در دكوراسيون و جريان طبيعي ورقه نخواهد داشت و از دكورا سيون شيت حذف گردد . يك عنصر با نوع وضعيت اثبات ميتواند بر روي ديگرعناصر قرار گيرد .
1div {position:fixed;top:50px;right:50px;}
يك عنصر با نوع حالت fixed در كنار سه عنصر با شرايط static يا اين كه نرمال
عنصر با نوع حالت fixed از جريان برگه مستقل شده‌است و با تكان ورقه در مكان خويش اثبات باقي ميماند و مكان خويش را نيز در شيت از دست داده ميباشد
گزينش شرايط نسبي ( Relative Positioning )يك عنصر با نوع وضعيت نسبي ( relative ) ميتواند نسبت به وضعيت طبيعي خويش تغيير‌و تحول جاي دهد و يا اين كه بر روي ديگر موادتشكيل دهنده قرار گيرد . اين عنصر از جريان طبيعي شيت كاملا بيرون نخواهد شد و با عنصرها ديگر در ورقه در رابطه خواهد بود . نكات اصلي دراين نوع تغيير و تحول شرايط باقي ماندن محيط و تاثير اين عنصر در دكوراسيون و جريان طبيعي شيت و همينطور تغيير تحول وضعيت نسبت به شرايط طبيعي ميباشد .از عنصرها با شرايط نسبي ( relative ) تحت عنوان محافظ و محدود كننده موادتشكيل دهنده با نوع شرايط اثبات ( absolute ) به كارگيري مي گردد كه توضيحات بيشتري دراين باره ارائه شود.
1div {position:relative;left:-20px;bottom:30px;}
يك عنصر با نوع حالت relative در كنار سه عنصر با حالت static يا اين كه نرمال
يك عنصر با نوع حالت relative نسبت به جاي طبيعي خويش تغيير‌و تحول جاي داده ميباشد و اثر خويش را در ورقه نگهداري كرده
با تكان ورقه عنصر با نوع وضعيت relative از جريان طبيعي برگه جداگانه نشده ميباشد
انتخاب حالت مطلق ( Absolute Positioning )يك عنصر با نوع حالت مطلق ( absolute ) از جريان طبيعي ورقه بيرون گردد . اين موادتشكيل دهنده نسبت به او‌لين عنصر بالا محرمانه خويش ( parent ) كه دارنده خواص و نوع موقعيتي غير ازموقعيت ايستا ( static ) مي باشند تغيير و تحول شرايط خواهند اعطا كرد . در شرايطي‌كه كه هيچ كدام از عنصرها بالا محرمانه دارنده نوع شرايط مختلف با شرايط طبيعي ( ايستا ) نباشند اين موادسازنده نسبت به عنصر html تغيير‌و تحول شرايط ميدهند .موادسازنده با وضعيت مطلق ميتوانند بر روي ديگر موادسازنده قرار گيرند ( overlap )
1div {position:absolute;left:0px;top:0px;}
يك عنصر با نوع شرايط absolute از جريان برگه غير وابسته شده‌است و نسبت به html گزينش حالت ميگردد
با جنبش برگه عنصر با نوع وضعيت absolute در مكان خويش باقي‌مانده و از جريان كاغذ مستقل شده‌است . اين عنصر نسبت به محدوده تگ html انتخاب حالت شده‌است . تفاوت در بين يك عنصر absolote و fixed در تكان كاغذ ميباشد . عنصر fixed در هنگام تكان شيت در مكان خويش باقي ميماند البته عنصر absolute از جريان برگه مجموعاَ بيرون مي گردد و در هنگام جنبش برگه نيز در مكان خويش اثبات ميماند .
قرار دريافت كردن روي هم ( Overlapping Elements )زماني كه موادتشكيل دهنده از شرايط معمولي و نوع حالت ايستا ) static ) بيرون مي‌شوند و مقدار متفاوتي براي آن‌ها معين ميگردد ( fixed , relative , absolute ) اين توان را خواهند داشت تا بر روي ديگر عنصرها قرار گيرند .
1234div.a {position:absolute;left:20px;top:20px;z-index:0;}div.b {position:absolute;left:30px;top:30px;z-index:1;}div.c {position:absolute;left:40px;top:40px;z-index:2;}div.d {position:absolute;left:50px;top:50px;z-index:3;}
موادتشكيل دهنده با نوع وضعيت absolute بر روي يكديگر قرار گرفته اند و به ترتيب حق تقدم z-index اكران داده ميگردند
براي در دست گرفتن و طرز قرار گيري و حق تقدم در قرارگيري اين موادتشكيل دهنده بر روي يكديگر از مقدار z-index استعمال ميشود . چندين عنصر ميتوانند به طور هم‌زمان بر روي يكديگر قرار گيرند و با انتخاب مقدار z-index مي قدرت حق تقدم در قرار گيري اين عنصرها را انتخاب نمود . عنصرها با z-index بيشتر نسبت به عنصرها با مقدار z-index كمتر فراتر قرار خواهند گرفت . اين عنصرها مانند چندين لايه بر روي يكديگر قرار خواهند گرفت .
سه شنبه ۲۵ آذر ۹۹ ۱۳:۵۷ ۳۲ بازديد
تا كنون نظري ثبت نشده است