Блог / CSS / 5 начина за изграждане на връзки, анкери с отстъп отгоре. Нервнича поради фиксирания блок (меню капачка).

Аз чува за пръв път, когато направих на сайта идва панел "Сподели в социалните мрежи", когато превъртате надолу бързо (опитайте него).

При използване на справки-котви на сайта, след като кликнете върху линка, панелът социална мрежа обхваща горната част на съдържанието (обикновено заглавие) и в крайния потребител просто не разбира, където той в крайна сметка стана. Можете да го опитате сами, като кликнете върху «А» линка по-долу.

И тъй като това е много популярен да направя шапки и Меню фиксирани позиции: фиксиран. лепкава към горната част на екрана, а след това аз мисля, че този сайт ще бъде от интерес за много хора. В него се спирам на няколко варианта за котви с отстъп от горната част на екрана, когато щракнете върху тях.

За по-ясно разбиране на всички h2 -zagolovki добавих запълване.

A: Standard котва

Може би ще е по-правилно да се обадите на поста не е "методи ... 5" и "4 методи ...". Тъй като това не е метод на всички, и е добър пример за това как не трябва да бъде, но О, добре.

В: вдлъбнатината под формата на псевдо

Използвайте псевдо да добавите запълване на елемента -: преди или: след това.

Browser поддръжка: Разбира Chrome, IE8 +, Firefox 3+, Opera 9.25+, Safari 3+.

забележки:

• Изискване подкрепа браузър за CSS psevodoelementov.
• Методът не работи правилно, ако продуктът не е фон или да попълните (увеличава мащаба на съдържание).
• Тя не работи правилно, ако даден елемент има свойства подплата-горната или граничен отгоре.

В: Положителни и отрицателни марж подложка

Ние използваме подложка за отстъп, и отрицателен марж. за отстраняване на една и съща вдлъбнатината - или по-скоро, за да стане прозрачна за потребителя.

Имайте предвид, че пълнеж пълнеж също попадат в обхвата на кастинга, тоест, ако вашата позиция е фон, много е вероятно да naedet съдържание пред него. За да игнорирате подложка чрез добавяне на фона на един елемент, използвайте CSS-имот фон-клип: съдържание кутия.

Browser поддръжка: Разбира Chrome, Firefox 4.0+, Opera 10.6+, Safari 3+.

забележки:

• Нуждаете се от подкрепата на браузъра фон-клип: съдържание кутия. но това е само в случай, ако искате да добавите фоново елемент.
• Някои ограничения за използване на свобода (включително марж-разпадането - е, когато долната вдлъбнатината на първия елемент и втори горната вдлъбнатина се определя от най-голям, което става величината на вдлъбнатината между тези елементи).
• Невъзможност да се използва подложка-отгоре.

D: гранична и с отрицателен марж

По същество същият като предишния метод, но вместо това се използва границата на подложките. Какво ни дава?

• Сега можете спокойно да използвате подложка подложка.
• Аз ще се опитам да го постави дясната - на идеята за граница - това е една и съща подложка. но само за да запълни и ефекти. Ето защо, когато се използва за запълване на фона, или елементът, че трябва да се вземе предвид, че тя rasprostaranyalas на самия елемент и подложка. но не и на границата (всъщност това е нашата ясна), ще има фон-клип: пълнеж кутия.
• Ограничения за използването на граничния покрив. който обаче е решен лесно - виж по-долу.

Browser поддръжка: Разбира Chrome, Firefox 1.0+, Opera 10.5+ Safari 3+.

D: D метод с възможност за добавяне на контур-отгоре

Допълнение към предишния метод, който ще добави в горната граница на елемент. Браузъри и псевдо-фон-клип (само ако на заден план или да попълните) се изисква.

Browser поддръжка: Разбира Chrome, Firefox 3.5+, Opera 10.5+ Safari 3+.