Вертикалната позиция на хоризонталната (вградени) елемент
Има случаи, когато текст специфична част от него (например, думата), за да се повиши (намалиха) по-горе (по-долу) на основната линия на текста:
Често този проблем е решен чрез използването на тагове за тази цел - и . Но ако преди да задачата "Инсталиране фраза 4px над базовата линия" вечерям, че няма да помогне, защото Тяхната позиция зависи от допустимите стойности на вертикално подравняване - средна, текст-отгоре, и т.н. Като цяло, това не е гъвкав, могат да възникнат ограничения в работните средства. И ние не обичам ограничения и строги ограничения, защото смятаме, че и да се потърси решение.
Нека се опитаме да вземем на думата 4PX над базовата линия на текста:
Първото нещо, което правя - правилната дума (текст част) увийте в който и да е елемент, като от време или по същия SUP (елемент трябва да е с малки букви, а не да бъде на отделен ред). Нашето заключение е маркера, за да бъде в състояние да определя индивидуалните качества.
Има случаи, когато текст специфична част от него (например, дума ) Необходимо да се повиши (нисш) по-горе (по-долу) текст линия на
Най-простото нещо, което може да дойде на ум - е да се опитате да използвате отрицателен отстъп на марж-нагоре:
Но това със сигурност не работи, тъй като на разделната-горе / марж-отдолу се реагира само да блокира ниво елементи.
Това е време да се помни имота позиция и стойността му роднина. позиции: спрямо елемент обикновено се използва за деца елементи с абсолютно позициониране, разположени по отношение на неговите граници. Но позицията: роднина също така дава възможност да преместите елемента, без това да повлияе на околната среда. Преместването може да бъде от гледна точка най-координати. наляво. прав. дъното.
педя <
позиция: относителна;
отгоре: -4px;
>
Решението е много просто.
Ако страницата съдържа елементи, които могат дори потенциално блокират раздела на текст (статия), които се движеха, този елемент трябва да бъде изрично посочено Z-индекс. че няма изненади в бъдеще.
педя <
позиция: относителна;
Z-индекс: 1;
отгоре: -4px;
>