CSS позиция: примери

Новите художници за гримиране често изпитват трудности при позиционирането на елементи чрез CSS

Специфична структура на документооборота

Позиция CSS работи с потока на уеб страница. Как да разберем това? По подразбиране всички елементи на страницата са подредени в реда, в който сте ги създали в html-маркиране. Ако маркерът удар с глава разположен над маркера долния, след това на страницата ще се покаже по-горе. И обратно, ако по някаква причина решите да поставите долния в HTML над "хедер", над "заглавката" ще се покаже "сутерен" на страницата. В този случай блоковите елементи заемат цялата налична ширина за тях. Малките, от своя страна, се поставят на една линия, докато те заемат всичко това, и след това започват да се прехвърлят на нова. Тази поръчка се нарича "документ поток".

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

CSS Позиция: статично

Позиция: статично, или статично позициониране, е стойността по подразбиране за всички блокове HTML, които сте създали. При нормални обстоятелства не е нужно да се справяте с него. Ако за всяко блокче или ред не е посочено никакво позициониране, то има стойност статична. На страницата такъв компонент се показва в съответствие с потока. Ако посочите свойства за него дясно / ляво или горе / долу, няма да има ефект.

CSS позиция: фиксирана

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

Основната характеристика на неподвижно разположените елементи е, че те могат да се припокриват с други блокове и линии на страници. При превъртане на блока с позиция: фиксиран изглежда, че ще остане на място, без да изчезне от екрана. Това е полезно, ако трябва да направите навигация или подобен елемент, към който потребителят трябва винаги да има достъп. Фиксирано позициониране се прилага и ако искате да поставите бърз бутон за превъртане в определена част от страницата.

Позиция на CSS: относителна

Използването на тази собственост се нарича относително позициониране. Ако зададете свойството на елемента на позицията: относителна, той ще остане на мястото си. На пръв поглед нищо особено няма да се случи, но всичко ще се промени, ако допълнително използвате имотите дясно / ляво и отгоре / отдолу. С тяхна помощ можете да контролирате движението на компонент спрямо местоположението му. На мястото, където блокът или линията е бил преди, ще има празно пространство - други елементи ще останат на техните позиции, без да обръщат внимание на свободното място.

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

Абсолютно позициониране

Един от най-интересните и най-често използваните опции. Когато използвате характеристиката Позициясъс стойност абсолютен Позицията на компонента на страницата ще се изчислява спрямо прозореца на браузъра. друг елементите (които не са абсолютно позиционирани) изглежда "забравят" за съществуването на "колега" с позиция: абсолютно и застанете в потока. Изглежда, че всичко е точно същото, както в случая с Позицията: фиксирани, Съществуват обаче и сериозни различия.

Първо, позицията на елемента може да бъде свободно контролирана - използва свойства горе / дясно / дъно / ляво. Например, ако зададете стойност дъно: 100 пиксела, блокът "натиска" от долната част на страницата до 100 пиксела. На второ място, при превъртане "абсолютният" компонент ще остане на мястото си, вместо да се движи със страницата.

Взаимодействие на абсолютни блокове с родителски елементи

Можете да постигнете още по-прецизен контрол върху абсолютно позиционирания компонент. За да направите това, трябва да зададете своя родител на собствеността "Позиция": фиксирана, относителна или абсолютно.

Да разгледаме един пример. Имате ли? Разделение с класа Относителният-DIV, вътре в който се намира Разделение с класа Абсолютната-DIV. Задайте свойството Position на вътрешния блок: абсолютно. Той незабавно "лети" от потока и е някъде над него, защото сега местоположението му се изчислява спрямо прозореца на браузъра. Сега даваме блока с класа Относителният-Разделение Позиция собственост: роднина и "блудният син" се връща на своето място. Почти. В действителност, тя се появява в горния ляв ъгъл на родителския елемент.

Защо се случва това? Въпросът е в спецификата на свойството на позицията: абсолютно. По подразбиране позицията му зависи от прозореца на браузъра, но ако "родителят" е позициониран по някакъв начин статичен, Позицията започва да зависи от родителския елемент. Това е много удобно, защото можете да поставите компонента навсякъде, без да изчислявате огромни числа спрямо прозореца на браузъра. Приемането често се използва за поставяне на икони, бутони и други малки елементи.

Позиционирайте CSS в центъра

Едно от основните трудности за начинаещите е да центрират елемента вертикално и хоризонтално. Използване на собствеността Position правилно, за да бъде лесно. Позиция CSS: абсолютно в центъра е зададено както следва. Да предположим, че имате dIV с класа Абсолютната-DIV, който е в "дива" с класа Относителният-DIV. "Родител" се позиционира относително и неговата ширина е равна на ширината на цялата страница. "Детето" има ширина и височина 400 пиксела, абсолютно позициониране и по подразбиране се намира в горния ляв ъгъл на родителския елемент.

Всичко, което трябва да направите, е да зададете абсолютния компонент горе: 50% и ляво: 50%. Почти готов! Absolute-Разделение се мести от мястото и беше почти в центъра, но не съвсем. Средната част на "родителя" докосва ръба и ние се нуждаем от центъра на "потомка" да бъде в центъра на блока. За това трябва да го попитате марж-наляво и марж-надясно със стойности -200 пиксела. По този начин ще преместим абсолютно позиционирания блок на половината му височина и ширина. Всичко, той е в центъра!

Припокриващи се компоненти

Проблемът може да бъде трудно, на пръв поглед, "припокриване" на позиционираните елементи на техните "съседи". Например, компонент с позиция: фиксиран ще се припокрият с всичко, което се намира на страницата. За коригиране на ситуацията е възможно чрез собственост Z-индекс, Не забравяйте обаче, че тя работи само за позиционирани елементи. Съответно, ако искате да поставите блок върху фиксиран позициониран елемент, този блок също трябва да бъде позициониран. Например относителна.

Lначина да научите позициониране - помислете за примери Позиция CSS, експериментирайте и опитайте нещо свое. Опитайте се да научите как да го използвате във връзка с функцията calc () - това ще даде възможност за гъвкаво коригиране на местоположението. Не забравяйте обаче, че тази собственост не е предназначена за изграждане на цялата "решетка" на страницата. С негова помощ трябва да преместите сравнително малки елементи, в противен случай лесно можете да се объркате.