Здравейте на всички! В тази статия ще се опитаме да разберем колкото е възможно повече, за да обясни какво е разположението на елементите и блоковете в CSS, какво прави той, и как да се избегнат често срещаните грешки. Ако са само началото да се разбере CSS, че все още не е до края може да представлява всички позиции перспективи собственост.
Така че, първо нека да погледнем какво е то. Имотът на позиция ви позволява да контролирате позицията на елементите на сайта на границите на екрана, както и по отношение на други елементи на сайта. Общо на линия са 6 възможности за използване на този имот, и ние ще разгледаме всяка от своя страна.
Позиция: абсолютна - приведе елементи на екрана
Тази собственост елементи, които тя е напълно позиционирани и неговата позиция ще зависи както от границата на екрана или границите на майка елемент. В същото време, други елементи и елементи на страницата ще се редят на опашка, сякаш блока на площадката не го прави.
За по-голяма яснота за това как абсолютният позициониране в CSS, създаде някои различни цветни блокове.
Какво виждаме? Три многоцветен блок, са разположени една под друга.
Сега ние определяме първата позиция блок: абсолютно. Ние се актуализира на страницата и ще видите, че втория блок липсва.
Какво мислите, какво ще се случи с елементите, ако позицията абсолютен настроите втория блок? Кои блокове ще се вижда? Ако отговорът ви на някой от първите третина, вие не сте се досетили. Страницата ще бъде видима само за втория модул. Можете да проверите за себе си чрез създаване на една и съща страница, или да изтеглите изходния код в края на поста.
Моля, имайте предвид, че не е виждал един от трите блока горе, само ако те са със същия размер. Ако всички блокове са с различни размери, те могат да се видят за другите.
Регламент позициониран елемент в CSS може да бъде определен с помощта на имота:
- Ляво - задава разстоянието от левия край на родителското устройство или от левия край на екрана.
- Право - определя точното разстояние от ръба на родителското устройство или от десния край на екрана.
- Най - задава разстоянието от горния ръб на родителското устройство или от горния край на екрана.
- Дъно - определя разстоянието от долния ръб или родителското устройство от долната част на екрана.
Тези свойства могат да бъдат определени в пиксели или като процент.
Скриване на блокове от сайта или позиция абсолютен -9999px
Доста прост начин да се скрие нежелано съдържание от сайта, но методът може негативно възприемане от търсачките, тъй като в действителност информацията е просто скрит от потребителя, но тя не е премахнат от сайта.
Така че, за да се отстранят ненужна блок на видимата област на обекта, определен неговия стил:
Поддържа, актуализира на страницата и ще видите, че номерът на блок 1 е преместило точно на мястото, където искаме да.
Обърнете внимание на факта, че този метод работи само ако сте задали абсолютно позициониране. Ако розово единица ще определи позицията: фиксиран или роднина, резултатът ще бъде различен.
Ние се определи позицията на елементите, когато превъртате през сайта с помощта на фиксирано положение
Тази функция ви позволява да се свързва елемент на определено място на екрана. Освен това, елемент остава в сила, дори и с превъртане на екрана. Доста често, фиксирани се използва за определен меню на сайта. Като абсолютна фиксирана позволява да определите позицията на всички 4 страни на монитора. Например, нека създадем четвърти блок.
Какво виждаме? Всички помещения за настаняване са се повишили прави, ориентирани съответно с екрана на една страна. Сега тези блокове и ще бъдат на екрана, независимо от това дали ние ще се превърта надолу по екрана, или не. Имайте предвид, че родителското устройство на екрана, ние не виждаме, че той остава в стилове. Той изчезна от екрана, се дължи на факта, че фиксираните блоковете не са взети под внимание при формирането на височината и ширината на родителското устройство. И тъй като майка вече не е в рамките на останалите елементи, неговата ширина и височина са загладени 0.
Не забравяйте, че вие не можете да зададете фиксиран блок единици родител, така приведе позицията фиксиран спрямо родителското устройство не може да се използва с CSS.
Позиция роднина - защо е необходимо?
Тази функция ви позволява да има елемент в сравнение с други елементи, но това не работи като абсолютна. Ако образуването на абсолютна и фиксирани размери позициониране елемент при формирането на обекта не се взема под внимание, а след това с относителна те трябва да бъдат взети под внимание. Нека разгледаме един пример.
Вземете ни от предишните 4 блока и да ги подредите в непосредствена близост един до друг.
Pink единица върви надолу и се премества леко на дясно, но в този случай, останалите, да останат в сила.
По този начин, можете да преместите елементите един спрямо друг, така че ви трябва. И все пак е интересно класиране Z-индекс имот, който позволява на елементи, за да налагат един на друг. Нека да поиска от втори и четвърти блок на Z-индекс: 10 и да видим какво ще стане.
Първият блок се появи отдолу на втория и четвъртия. Оказва се, че този имот ви позволява да контролирате и показване на елементи, определени в първото място, а други, напротив, да се крият.
И най-накрая, той остава да се разгледа последните 2 имота. Те са сравнително лесно, така че се отнасяме към тях с примери няма.
Позиция наследи - поставя избрания елемент е абсолютно същия позициониране като това на майка, т.е. всъщност го копирате.
Позиция статично - се дава на всички елементи на картата автоматично, освен ако не е посочено друго. В същото време, статичен, не ни позволява да промените позицията с помощта на горната, долната, наляво и надясно.
Последните публикации
Свързани статии