Nisbi yerləşdirilməlidir - bu nədir? ətraflı təsviri

Yuva HTML - uzun prosesi ciddi, lakin çox yaradıcı. İT məşğulluq insanların əksəriyyəti üçün, web pages layout qazma gündəlik görünə bilər, baxmayaraq ki, belə bir halda bir peşə var mütəxəssislər yalnız keyfiyyətcə vəzifəni həyata keçirmək, həm də maddi zövq prosesi almaq.

Bir təcrübəli coder olmaq əvvəl Lakin, hər newcomer müxtəlif təlimatlar və həm HTML dilinin xüsusiyyətləri öyrənilməsi çox vaxt sərf və onun müttəfiqi üzrə - CSS. dəqiq haqqında nə CSS, nisbi Vəzifə - - nə və nə "sünilik qulaqları" siz almaq üçün imkan verir, eləcə də top xassələri biri bu gün danışacağıq.

CSS nədir?

CSS kısaltması transcribed və "kaskad stillər" kimi rus dilinə tərcümə oluna bilər. Bu olduqca qəribə səslənir - bir tərəfdən, aydın görünür və sözlər, və digər tərəfdən - ümumi mənası dərhal əsir deyil. üslubu ilə - sadə ilə başlamaq edək. Bu texnologiya siz yalnız bir dəfə qeydiyyatdan dəfə sonsuz sayda istifadə edə bilərsiniz görünüşü ilə bağlı səhifədə obyektlərin müəyyən xüsusiyyətləri əlavə etmək üçün imkan verir.

Sözü "siyahıları" və ya "siyahıları" istifadə etmək olardı daha uyğun əslində, lakin orijinal tərcümə müəllifləri CSS siyahısı artıq kimi görünür ki, qərar və biz olan - rəsmi tərcümə sözü "masa" qəza demək olar ki, çıxdı belə onları imtahana çəkmək üçün indi.

Nəhayət, sözü "Cascade". fakt hər element qarışıq və ya hətta üst-üstə edilə bilər bir neçə üslub ola bilər ki. Vəzifə Mütləq - Belə hallarda, browser məsələn, Vəzifə nisbi əmlak var, onlardan biri ilə bir neçə üslub olduğu ortaya çıxdı blok, görünüşünü və digər bəstələmək üçün, bir sıra qaydaların müraciət var. Əslində, belə münaqişələr tolere edilə bilməz, lakin böyük layihələrdə belə qarışıqlıq tez-tez baş verir.

hər şey adı aydın olduqda Belə ki, indi, bir sadə misal baxaq. Sizin site müəyyən bir şəkildə dizayn düymələri çox sayda olmalıdır deyirlər. Onlar ölçüsü, kölgə, qeyri-şəffaflıq, rəng kimi xüsusiyyətləri var. Əlbəttə ki, hər bir düyməsinə yaratmaq, bu parametrləri müəyyən, lakin CSS istifadə etmək çox asandır bilər. Təcrübədə, yerine uzun bir siyahı, sonra yuxarıda xassələri bütün dəyərləri siyahıları müəyyən sinif təsvir etmək lazımdır, və hər düyməsinə tag yalnız sinif adını daxil etmək lazımdır, sonra brauzer özü istədiyiniz rəng bu elementləri rəng və onlara lazımi verəcək "parlaq".

Vəzifə əmlak nə edir?

Biz indi bu bütün məqalə başlandı hansı naminə əmlak Vəzifə birbaşa davam. siz ingilis dili ilə tanış olan, və ya yaxşı bir intuisiya varsa, onda siz artıq aydın olmalıdır - bu əmlak maddə yer üçün məsuliyyət daşıyır. Əslində, bu, lakin əvəzinə xüsusi yerini müəyyən yol, bu əmlak qonşu və ya bütövlükdə səhifə boyunca hörmət ilə bir qoyulmalıdır necə brauzer və ya başqa element deyir.

Nə dəyərlər Vəzifə əmlak bilər?

bir neçə müxtəlif dəyərlər qəbul edə bilər Bizim əmlak, yalnız beş var. Burada hər bir qısa təsviri:

• Vəzifə Devral. Bu xüsusiyyət bir valideyn element mövqeyi haqqında məlumat surəti imkan verir. Siz müəyyən Vəzifə qohumu ilə bir div varsa Məsələn, sonra da nisbi müəyyən olunacaq IMG irs dəyəri ilə girdi.
• Static yerləşdirilməlidir. bir daha bəyan halda bu dəyər avtomatik olaraq bütün elementləri verilir. kodu qeyd və "frills" bir sıra mövcud deyil kimi elementləri öz mövqeyini dəyişdirmək üçün imkan verir, mövqeyi uyğun.
• Vəzifə Absolute. Bu dəyər Vəzifə əmlak olduqca tez-tez bir "üzən" element yaratmaq lazımdır hallarda istifadə olunur. əmlak maddə bir dəyəri səhifənin digər komponentləri üçün "görünməz" dir. Yəni onlar bizim mütləq element yoxdur sanki təşkil olunur. O, özü həmişə asılı olmayaraq uzaq səhifə kaydırılmış edilmişdir necə yerdə olacaq.
• Vəzifə Sabit. mütləq element onu əvvəl elementləri qalan məhəl istifadə browser ekranın yuxarı sol küncündə yalnız koordinatları müəyyən valideyn bağlı isə çox hallarda, bu dəyər, lakin əvvəlki kimi.
• Nəhayət, nisbi yerləşdirilməlidir. Bu cür dəyərlər ümumi "rezin" adlı həsr olunmuş adaptiv yaratmaq üçün faydalı ola bilər ki, digər yerləşdirilməsi element nisbətən imkan verir. Bu əmlak ilə maddə səhifə öz mövqeyini dəyişdirmək imkanı itirmədən, digər "təkan olacaq".

müxtəlif brauzerlərdə Vəzifə İş

Bütün brauzerlərdə bərabər uyğun gəlir. Vəzifə dəyəri qəbul hər hansı bir axsaqlığa Internet sörf üçün ən alternativ proqramları tamamilə doğru olsa da, "xroniki xüsusi» Internet Explorer öz versiyası asılı olaraq, mülkiyyət hesab edir.

"Eşşək" Onlar sadəcə ignore - Məsələn, artıq "dəfn" brauzer IE6 istifadə edərək, dəyəri Sabit və varis istifadə edə bilməz. Lakin, vəziyyətin yeddinci versiyası inkişaf başladı və sevimli varis artıq emal Sabit olmasına baxmayaraq "digər brauzerlər yükləmək üçün brauzer," yalnız onun səkkizinci təcəssüm çatdı.

müşahidəçilərin qalan sakit ortalarında 90-cı illərin dərc 4 varyasyonları xassələri dəstək var Opera istisna olmaqla, ilə, ilk versiyası ilə Vəzifə idarə.

Cəmi Vəzifə İş

Əslində, Javascript Mövqe əmlakı ilə işləmək üçün necə hekayə, biz yalnız ədəb naminə daxil edilir. div.style.position = 'nisbi' Bu əmlak adı hər hansı bir xüsusi simvol yoxdur, çünki, bir bu kimi xətt daxil olmalıdır, nisbi div Mövqe təyin etmək, məsələn, hər hansı bir dəyişiklik olmadan JS istifadə edə bilərsiniz.

Gördüyünüz kimi, bu, olduqca sadə.

Niyə Vəzifə nisbi mahiyyəti xüsusi diqqət?

əmlak dəyərlər Vəzifə ən yumşaq, ətraf elementləri "atışma" dəyər istifadə edərək, "style mövqeyini: nisbi" qoymaq baxmayaraq, həmişə düzgün istifadə çünki bilər güclü "çəp" ekran bütün məzmunu, bütövlükdə bütün səhifə haqqında unutmayın lazımdır .

Bundan əlavə, bu əmlak yalnız proqram avtomatik olaraq bütün content pages təsir edəcək, çünki siz asanlıqla sabit dizayn adaptiv çevirmək imkan verir. Sonra biz hələ də bu dəyəri istifadə nümunələri və səhvlər hesab üçün vaxt var və siz praktikada onun maddi əhəmiyyətini görəcəksiniz.

Zaman nisbi konumlandırma istifadə etməli?

pages HTML şərti layout əlavə, Vəzifə nisbi tez-tez maraqlı təsirləri bir sıra yaratmaq üçün istifadə. Bir maddə istəyirsinizsə Məsələn, əksinə, tədricən öz hüdudlarından kənarda getdi bir səhifə "gəldi" və ya o, dəqiq bu əmlak bu "oyun" həyata kömək edə bilər.

Siz müəyyən bir dəyişən dəyəri cyclical dəyişiklik tənzimləmək üçün imkan verir CSS3 xassələri vasitəsilə mütərəqqi qoyulması məqsədi əgər Cəmi vasitəsilə həyata keçirilir Bu "tövsiyələr", və ya.

Bundan əlavə, mümkün bəzi hallarda "hibrid" dəyərlər Vəzifə nisbi yaratmaq. Eyni zamanda siz mövqe kimi bir şey etmək üçün imkan verir deyil, baxmayaraq ki, CSS, lakin bəzi tövsiyələr istifadə edərək mütləq nisbi, bu təsiri nail olmaq üçün hələ də mümkündür. Siz kimi bir şey kompleksi yaratmaq lazımdır Bu yanaşma hallarda faydalı ola bilər bir araç ipucu və ya pop-up menyu. nümunələri nəzərə alaraq, belə bir strukturunun təsviri verəcək "hibrid".

nisbi Reytinqde istifadə nümunələri

bu, olduqca sadə, lakin maraqlı təsirləri bir sıra həyata keçirmək üçün imkan verir ki, çevik alət - Nisbi yerləşdirilməlidir. Vaxt zay və faydasız kodu şablon yazmaq yerləşdirmək üçün, biz sizin site və ya xüsusi pages bəzəyə bilərsiniz bir neçə şifahi alqoritmlər təqdim edir.

nin "tökülmək" xətti ilə başlamaq edək. Siz "səyahət" ekranın sol kənarında, çünki yavaş-yavaş sağ hərəkət edəcək bir element üçün ehtiyac var düşünək. mövqe müəyyən etməlidir, belə bir "mexanizmi" həyata keçirmək: nisbi; Sol: -100px, burada -100 - blok eni təşkil piksel təxmini sayı. Bu stil siz "başlanğıc mövqe" yerləşdirilməsi, ekranın xaricində vahid gizlətməyə imkan verir. İndi kimi uzun brauzer pəncərəsinin eni minus element eni bərabər olmaq deyil kimi vahidi əmlak dəyərinin sol bir neçə ms artacaq script istifadə edə bilərsiniz. nəticə ekran boyu yayılmış və onun sağ əli ilə "park" sol kənarında çıxır bir vahididir.

Digər misal siz "nisbi-mütləq" elementləri yaratmaq imkan verir. Məsələn, Vəzifə nisbi olan başqa daxilində mütləq daxil edə bilərsiniz. Nəticədə, biz mütləq həkk olan ölçüsü yoxdur "nisbi" blok var, indi əvvəlki element müstəqil bir mövqe özünü büruzə edə bilər.

Tipik səhvlər Vəzifə nisbi istifadə

Vəzifə nisbi istifadə edərək ən ümumi səhv bir çox web dizaynerlər hər yerdə yerləşdirilə bilər hissədə yer sifariş etmək imkanı unuda edir. Ekranın və nisbi yerləşdirilməsi olan xaricində yerləşdirilmiş kifayət qədər böyük varsa Məsələn, onun yerində bir gaping "deşik" olacaq. Lakin, hətta bu əmlak bəzən müəyyən narahatlıqlar onun bloklarının bütün tədricən üst mövqe yerləşdirilir site, "özünü montaj" bir maraqlı effekti yaradan, məsələn, yaxşı üçün istifadə edilə bilər yaradır: 0; Sol: 0; t. e. orijinal yer.