O que significa elementos fixos no Tumblr?

O termo "elementos fixos" no Tumblr se refere a qualquer objeto no tema do Tumblr que não se move em relação à janela do navegador. Por exemplo, seu tema pode ter uma barra lateral fixa. Nesse caso, a barra lateral não se move quando você rola a página para baixo; ele sempre permanece no mesmo lugar em relação à janela do navegador. Os elementos fixos são definidos no código das folhas de estilo em cascata do seu tema.

HTML e CSS

Todos os temas do Tumblr são definidos por uma combinação de HTML e CSS. Em geral, o HTML controla a estrutura de um tema, enquanto o CSS dita seu estilo. Muitos sites têm arquivos HTML e CSS separados. No entanto, o HTML e o CSS de um tema típico do Tumblr existem juntos em um código-fonte unificado.

Encontrar o seu tema CSS

Para localizar o código-fonte do seu tema, você deve fazer login na sua conta do Tumblr. No painel, clique no ícone de engrenagem para acessar o menu Configurações. No menu Configurações, selecione o blog que deseja visualizar. No menu de personalização do blog, clique em "Personalizar" na seção Tema. Isso o levará para a página de personalização do tema. Abaixo do título do seu tema, clique em "Editar HTML". Isso exibirá o HTML e CSS do seu tema.

A posição: propriedade fixa

No código do seu tema, você pode pressionar "Ctrl-F" para pesquisar itens específicos. Se você digitar "position: fixed" no campo de pesquisa, poderá percorrer diferentes instâncias de elementos fixos em seu tema. Se a sua pesquisa não retornar resultados ou menos do que o esperado, tente pesquisar por "posição: fixa" sem espaço após os dois pontos. O elemento que é fixo será nomeado antes do colchete "{". Por exemplo #sidebar {position: fixed;} consertaria um elemento com o ID "sidebar".

Posicionando os Elementos

Uma vez que o método de posicionamento de um elemento tenha sido especificado, você pode movê-lo ao longo dos eixos horizontal ou vertical por um certo número de pixels. Para fazer isso, especifique a borda do contêiner do elemento e o número de pixels que você deseja separar o elemento dessa borda. Por exemplo, #sidebar {position: fixed; topo: 20px; direita: 10px;} posicionará a barra lateral 20 pixels da parte superior da janela do navegador e 10 pixels da direita da janela do navegador.

Alterando Elementos Fixos

Se você localizar um elemento fixo, poderá alterar a maneira como ele é posicionado. O atributo "position: static" fixa a posição do elemento em relação ao seu lugar no fluxo do código HTML. Este atributo é usado para deslocar o elemento em uma certa quantidade de sua posição estática normal. Por exemplo, #sidebar {position: relative; right: 20px;} deslocaria o elemento #sidebar 20 pixels de sua borda direita normal. Por último, o atributo position: absolute remove o elemento do fluxo do documento e o posiciona em relação ao elemento que o contém. Por exemplo, se um elemento de posição absoluta estiver dentro de um elemento de posição relativa, quaisquer alterações em sua posição ocorrerão em relação ao elemento de posição relativa. Você pode experimentar esses diferentes tipos de posicionamento para personalizar quais elementos são fixados em seu tema do Tumblr.