CSS позициониране - мамят за начинаещи, CSS
CSS позицията е един от най-мощните инструменти, който ви позволява да поставяте различни елементи в координатна система, което дава известна свобода в дизайна, изваждайки го от обикновените решения.
В момента, в който браузърът зареди уеб страницата, елементите (заглавки, редове, абзаци, div и т.н.) се изобразяват в реда, в който се появяват в маркирането на HTML документа. Позиционирането организира процеса на показване на всички елементи на страницата на сайта.
Типове позициониране в CSS
В HTML всеки елемент е правоъгълник, за който трябва да посочите външните и вътрешните полета, както и границата, която ги разделя.
Схемите за позициониране определят къде трябва да бъде този правоъгълник и как той трябва да повлияе на околните елементи.
В CSS свойството position може да има пет стойности:
По подразбиране всички елементи на уеб страница са позиционирани със статични. Това означава, че всеки елемент е позициониран според естествения ред на добавяне към страницата. Блочните елементи са разположени под блокови елементи, малки букви - един след друг.
Абсолютно позициониране
Този тип позициониране премахва елемент в общия поток на документа. Околните елементи игнорират търсения, сякаш е настроен да показва: none; .
В случай, че не искате пространството да се запълва с други елементи, трябва да зададете абсолютно позициониране за елемента, като посочите свойствата вляво, вдясно, отдолу и отгоре. Ако не е посочено свойство, горната лява двойка е зададена на 0.
Ключът към абсолютното позициониране е разбирането на началната точка: такива елементи са позиционирани спрямо най-близкия родител с нестатично позициониране. В случай, че най-близкият елемент не съществува, позиционирането се извършва спрямо основния документ.
Относително позициониране
Относително позиционираните елементи са позиционирани спрямо собствената им позиция (отместване въз основа на тяхната позиция по подразбиране). Когато изображението се измести, изображение остава на мястото си, спрямо което всички елементи са разположени и се наслагват един върху друг.
Относително позиционираните елементи са взети от нормалния поток, но все пак имат някакъв ефект върху подреждането на съседни елементи, като се държат така, че оригиналният елемент все още съществува в потока на документите.