CSS yerləşdirilməsi X, Y koordinatlarından çoxdur
CSS yerləşdirilməsi uzun illərdir veb layouts yaratmaq üçün mühüm bir hissəsidir. Flexbox və CSS Grid kimi daha yeni CSS düzəltmə metodlarının yüksəldilməsiylə belə mövqe hələ də hər hansı bir veb-dizaynerin çantasında əhəmiyyətli yer tutur.
CSS yerləşdirməsindən istifadə edərkən, lazım olan ilk şey, müəyyən bir element üçün mütləq və ya nisbi yerləşdirməni istifadə edəcəyi təqdirdə brauzerinizə vəziyyəti bildirmək üçün CSS mülkiyyətini qurur. Ayrıca, bu iki mövqeləri xüsusiyyətləri arasındakı fərqi anlamaq lazımdır.
Mütləq və qohumluq ən çox veb-dizaynda istifadə olunan iki CSS mövqeyi xarakterli olsa da, mövqeyi mülkiyyətinə həqiqətən dörd dövlət var:
- statik
- mütləq
- nisbi
- sabit
Statik bir web səhifəsində hər hansı bir element üçün u mənim mövqedir. Bir elementin mövqeyini təyin etmirsinizsə, bu statik olacaq. Bu, HTML sənədində olduğu yerə və bu sənədin normal axınının içərisində necə göstərəcəyinə əsaslanaraq ekranda göstərilmək deməkdir.
Statik mövqeyə malik elementə üst və ya sol kimi yerləşdirmə qaydalarını tətbiq etsəniz, bu qaydalar nəzərə alınmayacaq və element normal sənəd dövriyyəsində göründüyü yerdə qalacaqdır. Əslində, heç olmasa, bir elementi CSS-də statik mövqeyə təyin etmək lazımdır, çünki bu, u mənim dəyərdir.
Mütləq CSS yerləşdirilməsi
Mütləq yerləşdirmə, yəqin ki, başa düşmək üçün ən asan CSS mövqeyidir. Bu CSS mövqeyindən başlayırsınız:
mövqe: mütləq;Bu dəyər brauzerdə yerləşdirilən hər hansı bir sənədin normal xaricindən çıxarılmalı və səhifənin dəqiq bir yerində yerləşdirilməlidir. Bu, elementin ən yaxın qeyri-statik olaraq yerləşdiyi ata əsasında hesablanır.
Qətiliklə yerləşdirilən element sənədin normal xaricindən çıxarıldığı üçün HTML-də əvvəl və ya sonra elementlərin veb səhifəsində yerləşdirilməsinə təsir göstərməyəcəkdir.
Bir nümunə olaraq - qohumunuzun dəyəri ilə yaxınlaşdığınız bir bölünmə varsa (bu dəyəri qısaca nəzərdən keçirəcəyik) və bu bölmə içərisində bölmənin üst hissəsindən 50 piksel yerləşdirmək istədiyiniz bir bəndiniz varsa, bu paragrafa "mütləq" bir mövqe dəyəri əlavə edər, beləliklə "üst" əmlaka 50px ofset dəyərinə malikdirlər.
mövqe: mütləq; üst: 50px;Bu qətiliklə yerləşdirilən element həmişə həmin nisbətən yerləşdirilən bölmənin üst hissəsindən 50 piksel göstərməlidir - başqa bir yerdə normal axında göstərilmir. Sizin "tamamilə" yerləşdirilən elementiniz kontekstində nisbətən yerləşdirilən bir istifadə edir və istifadə etdiyiniz pozitiv dəyər nisbətəndir.
Istifadə etmək üçün mövcud olan dörd yerləşmə xüsusiyyətləri bunlardır:
- üst
- sağ olun
- alt
- sola çıxdı
Üst və ya aşağıdan istifadə edə bilərsiniz (element həm bu dəyərlərə görə yerləşdirilə bilməz), həm də sağa və ya sola.
Bir element mütləq mövqeyə yerləşdirilirsə, lakin orada qeyri-statik şəkildə yerləşdirilən atalar yoxdursa, o, səhifənin ən yüksək səviyyəli elementi olan bədən elementinə nisbətdə yerləşdiriləcəkdir.
Nisbi mövqe
Artıq nisbi mövqeyə toxunduq, indi bu əmlakı nəzərdən keçirək.
Nisbi yerləşdirmə mütləq yerləşdirmə kimi eyni mövqedən istifadə edir, ancaq elementin mövqeyini ən yaxın qeyri-statik yerləşdirilməmiş atasının üzərinə yerləşdirmək əvəzinə elementin normal axında olacağı yerdən başlayır.
Məsələn, web səhifənizdə üç paraqrafınız varsa və üçüncü bir "mövqe: nisbi" stiliniz varsa, mövqeyi onun cari yeri əsasında hesablanır.
Paraqraf 3.
Yuxarıda göstərilən misal üçün, üçüncü paraqraf konteyner elementinin sol tərəfində yerləşdiriləcək, lakin hələ də ilk iki paraqrafın altındadır. Bu sənədin normal axını içərisində qalacaq və yalnız bir qədər əvəzolunacaqdır. Əgər siz onu mövqeyə dəyişdinizsə: mütləq; bundan sonra hər hansı bir şey sənədin normal axını içində qalmayacaq, çünki onun arxasında bir şey görünəcəkdir.
Bir web səhifəsində elementlər tez-tez bir dəyər mövqeyini təyin etmək üçün istifadə olunur: nisbətən heç bir ofset dəyərinə malik deyildir, yəni element normal axında tam olaraq qalacaqdır. Bu element yalnız digər elementlərin tamamilə yerləşdirilə biləcəyi bir kontekst kimi qurulmaq üçün edilir. Məsələn, bütün veb saytınızı əhatə edən "konteyner" (veb-dizaynda çox ümumi bir ssenari olan) sinfi dəyəri ilə bölüşdürürsəniz, bu bölmə nisbi bir mövqedə təyin edilə bilər ki, onun içərisində bir şey istifadə edə bir yerləşmə konteksti olaraq.
Sabit mövqe haqqında nə deyirsiniz?
Sabit yerləşdirmə mütləq yerləşdirmə kimi bir çox şeydir. Element mövqeyi mütləq model ilə eyni şəkildə hesablanır, lakin sabit elementlər daha sonra həmin yerdə yerləşdirilir - demək olar ki, filigran kimi. Sayfada başqa hər şey daha sonra bu öğeyi geçecektir.
Bu əmlak dəyərindən istifadə etmək üçün aşağıdakıları təyin edərdiniz:
mövqe: sabit;Sitenizdeki bir elementi düzəldərkən veb səhifənizdə çap olunduqda həmin yerdə çap olunacağını unutmayın. Məsələn, elementiniz səhifənin yuxarısında sabitləşsəydi, hər bir çap edilmiş səhifənin üst hissəsində görünür - bu səhifənin yuxarı hissəsində yerləşdirilib. Yazdırılan səhifələrin sabit elementləri necə göstərdiyini dəyişdirmək üçün media növlərindən istifadə edə bilərsiniz:
@media ekranı {h1 # ilk {mövqe: sabit; }} @media print {h1 # ilk {mövqe: statik; }}Jennifer Krynin tərəfindən hazırlanan əsər. Jerimy Girard, 1/7/16 tarixində redaktə etdi.