Как да използвам свойството position в CSS за подравняване на елементи

Позиционирането на елементи с CSS в уеб разработката не е толкова лесно, колкото изглежда. Нещата могат бързо да се усложнят, тъй като вашият проект става по-голям и без да имате добро разбиране за това как CSS се справя с подравняването на HTML елементи, няма да можете да поправите проблемите си с подравняването.

Има различни начини / методи за позициониране на елементи с чист CSS. Използването на CSS float, display и position свойства са най-често срещаните методи.

В тази статия ще обясня един от най-объркващите начини за подравняване на елементи с чист CSS: свойството position. Тук имам и друг урок за CSS Display Property.

Ако предпочитате, можете да гледате видео версията на CSS Positioning Tutorial:

Нека да започнем...

CSS Позиция и помощни свойства

Така че има 5 основни стойности на свойството Position :

position: static | relative | absolute | fixed | sticky

и допълнителни свойства за задаване на координатите на елемент (аз ги наричам „помощни свойства“ ):

top | right | bottom | left И z-index

Важна забележка : Помощните свойства не работят без декларирана позиция или с position: static.

Какъв е този z-индекс?

Имаме височина и ширина (x, y) като 2 измерения. Z е 3-то измерение. Елемент в уеб страницата идва пред други елементи, когато z-indexстойността му се увеличава.

Z-индексът не работи съсposition: staticили без декларирана позиция.

Можете да гледате видеоклипа в моя канал, за да видите по-подробно как да използвате z-индекса :

Сега да продължим със стойностите на свойството position ...

1. Статични

position: staticе стойността по подразбиране . Независимо дали го декларираме или не, елементите се позиционират в нормален ред на уеб страницата. Нека дадем пример:

Първо дефинираме нашата HTML структура:

След това създаваме 2 кутии и дефинираме техните ширини, височини и позиции:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Както можем да видим на снимката, дефинирането на позиция: статично или не няма никакво значение.Кутиите са позиционирани според нормалния поток на документи .

2. Относително

position: relative: Нова позиция на елемент спрямо нормалната му позиция.

Започвайки с position: relativeи за всички нестатични позициистойности, ние можем да променим позицията на елемента по подразбиране, като използваме помощните свойства , които споменах по-горе.

Нека преместим оранжевата кутия до синята.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
ЗАБЕЛЕЖКА: Използването на позиция: относително за елемент, не засяга позициите на други елементи.

3. Абсолютно

В position: relative, елементът е позициониран спрямо себе си. Въпреки това, абсолютно lyпозиционираният елемент е спрямо родителя си .

Елемент с position: absoluteе премахнат от нормалния поток на документи. Той се позиционира автоматично до началната точка ( горния ляв ъгъл) на своя родителски елемент. Ако няма никакви родителски елементи, първоначалният документ ще бъде неговият родител.

Тъй като position: absoluteпремахва елемента от потока на документи, други елементи са засегнати и се държат, когато елементът е напълно премахнат от уеб страницата.

Нека добавим контейнер като родителски елемент:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

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

Нека преместим оранжевото поле с 5 пиксела:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

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

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Фиксиран

Подобно position: absolute, фиксираните позиционирани елементи също се отстраняват от нормалния поток на документи. Разликите са:

  • Те са свързани само с документа, а не с други родители.
  • Те не се влияят от превъртането .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Тук в примера променям позицията на оранжевата кутия на фиксирана и този път тя е относителна 5px вдясно от, а не неговият родител (контейнер) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!