Какво са фиксираните елементи в Tumblr?

Какво са фиксираните елементи?

В Tumblr терминът „фиксирани елементи“ означава всеки елемент от темата, който остава неподвижен спрямо прозореца на браузъра, независимо от превъртането на страницата. Пример: страничната лента, която винаги стои на същото място, докато скролвате.

HTML и CSS

Темите в Tumblr се изграждат от комбинация от HTML (структура) и CSS (стилове). За разлика от много уебсайтове, където HTML‑ът и CSS‑ът са в отделни файлове, в Tumblr те обикновено са събрани в един общ кодов файл.

Къде да намерите CSS‑а на темата

1. Влезте в профила си в Tumblr.
2. От таблото кликнете върху иконата‑зъбно колело и изберете Settings.
3. Изберете блога, който искате да прегледате.
4. В секцията Theme натиснете Customize.
5. Под името на темата кликнете Edit HTML. Там ще видите целия HTML и CSS код.

Свойството position:fixed

В кода можете да натиснете Ctrl+F и да потърсите position: fixed (или position:fixed без интервал). Всички елементи, които имат това свойство, ще се появят. Името на елемента стои пред фигурната скоба – напр. #sidebar{position:fixed;} фиксира елемента с ID sidebar.

Позициониране на фиксираните елементи

След като елементът е зададен като фиксиран, можете да определите разстоянието му от краищата на прозореца чрез свойства като top, right, bottom и left. Пример:
#sidebar{position:fixed; top:20px; right:10px;} поставя страничната лента 20 px от горната граница и 10 px от дясната.

Промяна на фиксираните елементи

Ако искате елементът да се държи по‑различно, заменете position:fixed с едно от следните:

• position:static – елементът се позиционира според естествения поток на HTML кода.
• position:relative – запазва естественото си място, но ви позволява да го изместите с top, right и пр.
• position:absolute – премахва елемента от потока и го позиционира спрямо най‑близкия родител с position:relative или position:absolute.

Експериментирайте с тези типове позициониране, за да персонализирате кои части от вашата тема остават фиксирани и къде се появяват.