Преместване на блок (относителна позиция; ), CSS примери

Елемент с позиция: относителна; се измества на разстоянието, посочено в свойствата top, right, bottom, left, от първоначалното си местоположение. Поставянето на елемент над други елементи се контролира чрез свойството z-index.

След като свойството position е зададено на relative, размерът на елемента няма да се промени и съседните елементи няма да се преместят в освободеното пространство.

Преместване на елемент над други елементи

За да накарате елемента "2" да се скрие под друг често неподвижен елемент "1", можете да посочите позицията на елемента "1": относителна; , което не пренебрегва свойството z-index.

Твърде много контекст на подреждане прави нещата трудни, така че е най-добре да не използвате z-index, където можете да го направите без него.

Преместете елемент настрани, така че съседните елементи да останат на мястото си

Свойствата отгоре, отдясно, отдолу, отляво могат да имат както положителни, така и отрицателни стойности във всяка мерна единица, както и в проценти. По подразбиране те са настроени на автоматични.

Елемент с горна част: -4em; ще заеме същата позиция като при дъното: 4em; . Елемент с ляво: -4em; ще заеме същата позиция като с дясно: 4em; .

Когато се използват горните и долните свойства едновременно, долното свойство се игнорира. Когато се използват свойствата ляво и дясно едновременно, свойството дясно се игнорира.

Процентните стойности на горните и долните свойства се изчисляват от височината на съдържанието на най-близкия невграден родител, чиято височина не е автоматична.

Ако височината на най-близкия родител е auto, тогава процентната височина се заменя с height: auto; , в които горните и долните свойства не работят като процент от най-близките деца.

Стойностите на левите и десните свойства като процентсе изчисляват от ширината на съдържанието на най-близкия невграден родител.

Стойностите на свойствата отгоре, отдясно, отдолу, отляво като процент пропускат родителския ред.

Стойност на препълване, различна от видимата на родителя, скрива частта извън границите на дъщерния елемент от първия екран на видимост.