What Does Fixed Elements Mean in Tumblr?

by Serm Murmson

The term "fixed elements" in Tumblr refers to any object in your Tumblr theme that does not move relative to the browser window. For example, your theme might have a sidebar that is fixed. In this case, the sidebar does not move when you scroll down the page; it always stays in the same place relative to the browser window. Fixed elements are defined in your theme's Cascading Style Sheets code.


All Tumblr themes are defined by a combination of HTML and CSS. In general, HTML controls the structure of a theme, while CSS dictates its style. Many websites have separate HTML and CSS files. However, the HTML and CSS of a typical Tumblr theme exist together in one unified source code.

Finding Your Theme CSS

In order to locate your theme's source code, you must log in to your Tumblr account. From your dashboard, click the gear icon to access the Settings menu. In the Settings menu, select the blog you wish to view. In the blog customization menu, click "Customize" in the Theme section. This will take you to the theme customization page. Under your theme's title, click "Edit HTML." This will display your theme's HTML and CSS.

The Position: Fixed Property

Within your theme's code, you can press "Ctrl-F" in order to search for specific items. If you type "position: fixed" into the search field, you can cycle through different instances of fixed elements in your theme. If your search returns no results or fewer than expected, try searching for "position:fixed" with no space after the colon. The element that is fixed will be named before the "{" bracket. For example #sidebar{position:fixed;} would fix an element with the "sidebar" ID.

Positioning the Elements

Once an element's method of positioning has been specified, you can move it along the horizontal or vertical axes by a certain number of pixels. In order to do this, specify the edge of the element's container and the number of pixels you wish to separate the element from that edge. For example, #sidebar{position:fixed; top: 20px; right: 10px;} will position the sidebar 20 pixels from the top of the browser window and 10 pixels from the right of the browser window.

Changing Fixed Elements

If you locate a fixed element, you can change the way in which it is positioned. The "position:static" attribute fixes the element position relative to its place in the flow of the HTML code. This attribute is used to offset the element by a certain amount from its normal static position. For example, #sidebar{position: relative; right:20px;} would offset the #sidebar element 20 pixels from its normal right border. Lastly, the position:absolute attribute removes the element from the document flow and positions it relative to its containing element. For example, if an absolute-positioned element is inside of a relative-positioned element, any alterations to its position will occur relative to the relative-positioned element. You can experiment with these different positioning types in order to customize which elements are fixed in your Tumblr theme.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

About the Author

Serm Murmson is a writer, thinker, musician and many other things. He has a bachelor's degree in anthropology from the University of Chicago. His concerns include such things as categories, language, descriptions, representation, criticism and labor. He has been writing professionally since 2008.

More Articles

Photo Credits