Display ва мавқеъгузорӣ

Ин барои чӣ лозим аст

То ҳол унсурҳо аз боло ба поён пайи ҳам меистоданд — ин ҷараёни муқаррарии ҳуҷҷат аст. Аммо дар сайтҳои ҳақиқӣ меню дар як сатр меистад, нишонаи «−20%» дар кунҷи корт овезон аст, тугмаи чат ҳангоми гардондан ҷой иваз намекунад, равзанаи воридшавӣ бошад болои саҳифа пайдо мешавад. Ҳамаи инро хусусиятҳои display ва position мекунанд.

display: унсур чӣ тавр ба ҷараён медарояд

.a { display: block; }
.b { display: inline; }
.c { display: inline-block; }
.d { display: none; }

Қимат	Чӣ тавр рафтор мекунад	Бо пешфарз кист
block	аз сатри нав, ба тамоми бар; width, height, margin кор мекунанд	div, p, h1, ul, li
inline	дар дохили сатр, мисли калима; width ва height кор намекунанд	span, a, strong, img
inline-block	дар сатр мисли калима, аммо андозаҳо ва фосилаҳо кор мекунанд	button, input
none	унсур нест: намоён нест ва ҷой намегирад	head, script

<style>
  a { display: inline-block; padding: 10px 20px; background: gold; }
</style>
<a href="#">Харидан</a> <a href="#">Ба сабад</a>

Натиҷа: ду тугмаи зард дар паҳлӯи ҳам. Бо inline-и оддӣ padding аз боло ва поён ба сатрҳои ҳамсоя мерасид.

display: none-ро барои пинҳон кардани унсурҳо истифода мебаранд (меню дар телефон, равзана то пахши тугма). visibility: hidden бошад унсурро пинҳон мекунад, аммо ҷои холиро барои он нигоҳ медорад.

position: унсур дар куҷо меистад

Қимат	Аз чӣ ҳисоб мешавад	Аз ҷараён мебарояд?
static	мавқеи муқаррарӣ (бо пешфарз)	не
relative	аз ҷои муқаррарии худ	не, ҷой мемонад
absolute	аз наздиктарин аҷдоде, ки position-аш static нест	ҳа
fixed	аз равзанаи браузер; ҳангоми гардондан ҷой иваз намекунад	ҳа
sticky	муқаррарӣ, аммо ҳангоми гардондан «мечаспад»	не

Мавқеъро бо top, right, bottom, left медиҳанд — масофа аз канори мувофиқ.

relative

.shift { position: relative; top: 10px; left: 20px; }

Натиҷа: унсур 10px ба поён ва 20px ба рост ҷой иваз кардааст, дар ҷои кӯҳна бошад «сӯрохӣ» монд. relative-и худ ба худ кам лозим мешавад — аксар вақт онро ба волид мегузоранд, то дар дохил absolute кор кунад.

absolute

<style>
  .photo { position: relative; width: 200px; height: 150px; background: #ddd; }
  .sale { position: absolute; top: 0; left: 0; background: red; color: white; }
</style>
<div class="photo">
  <span class="sale">−20%</span>
</div>

Натиҷа: лавҳаи сурхи «−20%» дар кунҷи чапи болоии блоки хокистарӣ.

Муҳим: absolute наздиктарин аҷдодро бо position: relative (ё absolute, fixed, sticky) меҷӯяд. Агар чунин набошад — ҳисоб аз тамоми саҳифа меравад, ва нишона ба кунҷи экран парвоз мекунад.

fixed

.up { position: fixed; right: 20px; bottom: 20px; }

Натиҷа: тугма ҳамеша дар кунҷи рости поёнии равзана аст, корбар чӣ қадаре ки гардонад. Ҳамин тавр тугмаҳои «Ба боло», чатҳои дастгирӣ, баннерҳои cookie сохта мешаванд.

sticky

.header { position: sticky; top: 0; background: white; }

Натиҷа: сарлавҳа бо саҳифа ҳаракат мекунад, аммо ба болои равзана расида «мечаспад» ва дар он ҷо мемонад. Бе top sticky кор намекунад: браузер бояд донад, ки дар куҷо часпад.

z-index: кӣ болост

Вақте унсурҳо ҳамдигарро мепӯшонанд, он ки z-index-аш калонтар аст, боло мешавад (танҳо дар унсурҳои мавқеъгузоришуда кор мекунад — на static):

.modal { position: fixed; z-index: 100; }
.chat { position: fixed; z-index: 10; }

Натиҷа: равзана тугмаи чатро мепӯшонад. Дастаи варақҳоро тасаввур кун: z-index — рақами варақ аз боло.

Дар дохил чӣ тавр кор мекунад

Браузер аввал ҳамаи унсурҳои ҷараёни муқаррариро аз боло ба поён ҷойгир мекунад. Унсурҳо бо absolute ва fixed-ро вай аз ҷараён «мебарорад» — ҳамсояҳо онҳоро намебинанд ва ба ҷои холишуда мегузаранд. Баъд унсурҳои баровардашуда аз рӯи координатаҳои худ болои боқимондаҳо, бо тартиби z-index кашида мешаванд.

Хатоҳои маъмул

1. width дар inline. Дар <span> ва <a> андозаҳо кор намекунанд — inline-block ё block лозим аст.
2. relative-ро дар волид фаромӯш карданд. Нишонаи absolute ба кунҷи саҳифа парвоз мекунад.
3. z-index «кор намекунад». Унсур position: static дорад — z-index таъсир надорад. position: relative илова кун.
4. sticky бе top. Ҳеҷ чиз намечаспад.
5. Тамоми тартиби саҳифа бо absolute. Дар андозаи дигари экран ҳама чиз ба ҳам мебарояд. Барои тартиб Flexbox ва Grid-ро (мавзӯъҳои оянда) истифода бар, absolute-ро бошад — барои чизҳои хурд, мисли нишонаҳо.

Ёддошт

Код	Чӣ кор мекунад
display: block / inline / inline-block	чӣ тавр ба ҷараён медарояд
display: none	унсурро пурра нест кардан
visibility: hidden	пинҳон кардан, ҷойро нигоҳ дошта
position: relative	ҷойивазкунӣ аз ҷои худ; «лангар» барои absolute
position: absolute	аз наздиктарин аҷдоди мавқеъгузоришуда
position: fixed	аз равзана, ҳангоми гардондан ҷой иваз намекунад
position: sticky; top: 0	ҳангоми гардондан мечаспад
top / right / bottom / left	координатаҳо
z-index	кӣ болост