CSS positioning is super important for coding on Subeta. We use it to move divs and other elements around to specific areas of the page. The most commonly used on Subeta is absolute positioning, but there are other types as well. Understanding exactly how positioning works can be a bit tricky.

Here are the different explanations as they’re found on W3Schools – CSS Position Property:

Absolute – Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties

Fixed – Generates an absolutely positioned element, positioned relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties

Relative – Generates a relatively positioned element, positioned relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position

Static – Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

But what exactly does this mean? Let’s go into a bit more detail on the most commonly used, absolute positioning.

Absolute positioning

Many people are under the impression that absolute positioning works similarly to fixed positioning, in that top:0px and left:0px will always move the element to the very top left corner of the window. However, this is not necessarily true.

Let’s say you’re trying to position a div that is inside another div. You give the outside div an absolute position of top:100px and left:100px. It will appear 100 pixels from the top left of the window, as expected. Now, let’s pretend you also give the inner div an absolute position of top:400px and left:400px. You might expect that the inside div will appear 400 pixels from the top left – but that isn’t what will happen. The inner div will appear 500 pixels from the top left (100 pixels + 400 pixels = 500). This is because absolute positioning will position the element relative to the first parent element that has a position other than static (default). The outer div is the “parent element,” and since we’ve positioned it, anything inside it that is also absolute positioned will move relative to where it is. This means that the inner div can never be positioned outside of the visual boundaries of the outer div, that is, unless we remove the positioning on the outer div.

Confusion over how absolute positioning works is a common problem among Subeta profile-makers. Usually the scenario goes like this: a profile-maker will absolute position one of the columns on their profile. They’ll use overflow:auto to turn the column into a scrolling div. They will then try to absolute position a section that is within the column – usually the “Leave a Comment” or Human Avatar section. The profile-maker then can’t figure out why, no matter how far away they try to position the section, it won’t move outside of the scrolling div. The solution for this problem is to move the section to a different column, one that has no positioning set on it.

Hopefully, this post clears up the confusion some people have over how absolute positioning works!

Have any questions or comments? Feel free to comment on this post!