По подразбиране всички елементи на страницата са подредени в серия:
- блокови елементи, разположени една под друга,
- малки елементи, подредени един след друг.
В CSS, че е възможно да се контролира позиционирането на елементите, благодарение на които можете да се нарушават установения ред на тяхното местоположение и поставят елементите в желаната позиция на страницата.
Класирането се осъществява от позицията на собственост. Тя определя начина на позициониране и може да се прилага за всички елементи.
Разграничаване между абсолютно и относително позициониране на елементите.
абсолютно позициониране
Имоти абсолютна стойност позиция поставя абсолютен член позициониране.
Когато абсолютните позициониране координатите на новата позиция на елемента се определят от най-добрите качества. прав. долния ляв и:
- по отношение на ръба на прозореца на браузъра, ако майка елемент не е налице или ако неговата позиция собственост е настроена да статичен (настройката по подразбиране).
- плътно в краищата на майка елемент, ако това положение собственост, определени в абсолютна. фиксирана или роднина.
Отличителна черта на абсолютна член на позициониране е да се освободи пространството, заемано преди това: с изключение на зона може да бъде заето от друг елемент.
Ако свойствата на потребителя позиция стойността, посочена също ще абсолютно позиционирани. Но този елемент е фиксиран в точка с координати, дадени свойства отгоре. прав. дъното и си тръгна. тя не превъртете с съдържанието на страницата.
Penguin се намира в лявата част на параграфа - защото той трябва да бъде поставен по подразбиране.
Текст, преместен на мястото, заемано преди това от един пингвин. Пингвин е поправена!
В примера за пингвин във втория параграф се задава фиксирана стойност за позицията на имот е посочено и координира, като се използват най-добрите и подходящите ключови думи.
Countdown произход е от краищата на прозореца на браузъра, майка елемент (абзац - етикет
) Е посочена позиция, следователно, е необходимо по подразбиране статична.
Така пингвин се намира на разстояние 300 пиксела от горния ръб 220 и пикселите от десния край на прозореца на браузъра. И той не превъртите със съдържанието на страницата: Винаги го видя в една и съща фиксирана местоположението (виж вдясно.).
относително позициониране
Значение свойства относителна позиция установява относителна член позициониране.
Когато относителното позициониране координати на новата позиция на елемента е разположен също така използване на най-добрите свойства. прав. дъното и си тръгна.
Но координатите, разчитат на първоначалната позиция на пространството за елемент. В този случай, заемано преди това пространство, той не е безплатен, а това място не може да предприеме други елементи.
Penguin се намира в лявата част на параграфа - защото той трябва да бъде поставен по подразбиране.
Текстът не е изместен към мястото, заемано преди това от един пингвин: той сякаш го остави!
В примера за пингвин във втория параграф се задава относителна стойност позиция за имота и координати са определени с ключови думи отдолу. 10px и лявата. 100 пиксела.
Обратното броене се извършва по отношение на координатите на началната позиция на мястото на пингвин.
Слоеве в CSS. Z координата
Обикновено всеки елемент има две координати (тъй като ние се занимаваме с една равнина) X и Y. които определят позицията си на страницата.
В CSS, е възможно да се поиска и трети елемент - пространствено координират по този начин Z. симулиране на трето измерение и позволява на елементите се припокриват.
Z-индекс имот реализира тази възможност: тя определя Z. координатната стойност определяне броя на слоя на която елемент и по този начин създаване на подреждане ред на елементите един върху друг
стойност на имота Z-индекс може да бъде всяко положително число или 0. Колкото по-висока стойност на по-високо ниво Z. разположен по отношение на слоеве с по-малка стойност на координатната.
Например, слоят номерирани 3 е по-близо до потребителя от слоеве с числата 1 или 2 и слой без определената предварително координира Z.
Начално имот Z-индекс е настроен на автоматично или 0. на преден план е елемент, който в HTML код е описано по-долу, както и за равни стойности на свойствата на Z-индекс.
Имоти прилага позиционирани елементи, т.е. елементите, които определят имота позиция към стойността абсолютно. фиксирана или роднина.
Поздрави!
Поздрави!
Обяснение за пример. Red "Hello" по-близо до потребителя, тъй като той е настроен на по-голяма стойност на Z-индекса. равно на 2. Докато за син "HELLO" Z-индекс е 1.
Свързани статии