A Short Guide to CSS Positioning
Tags: Css3, CSS, Programming, Web Development, Coding

Position Relative

relative elements follow the normal DOM flow. They always refer to the parent element’s CB for the sizes and the positions ( top , left , etc.). They, however, refer to their own CB’s position that’s included in the DOM flow of the parent element for the start position.

The relative element always looks at the parent element’s CB

relative and absolute elements have the same feature in common — they can overlap the other elements.

#p1 {

top: 50%;

}

p1 ’s top is 50% here. And since p1 refers to the parent element’s CB, the top value will be 50% of the parent element’s height. But it isn’t offset from the top of the parent element’s CB. It’s from the top of its CB.

The relative element overlaps the parent element

There’s a difference between relative and absolute . absolute elements should be rendered on the browser no matter what unless their display is set to none — for example, relative elements are determine whether or not to be shown on the browser depending on their parent element’s overflow property.

I’ll explain this a little deeper. Once a DOM element is created, the element does two tasks. The first job is to establish the CB that looks exactly the same as itself for its descendant elements who’ll refer to its CB later when they need to. The other task is to determine the CB it’ll refer to when necesssary.

This is similar to JavaScript’s prototype . When a child element is out of the CB it’s referring to, the browser decides whether to display the child element or not by looking at the overflow property of the element whose CB is being referred to by the child element. If the overflow property is set to scroll or auto , the browser has to make the child element visible.

An easier explanation: If the overflow property of the element that’s CB is being referred to is either scroll or auto , the child element will be displayed.

Let’s check out if this is true.

#inner {

overflow: scroll;

} #p1 {

top: 200%;

}

inner has overflow: scroll and p1 is quite far away from the top, so you can’t see it at first. But the browser allows you to see it if you scroll down.

The relative element has to be shown no matter what

In contrast, it won’t be displayed if the inner ’s overflow is hidden . And if overflow isn’t set, it’ll be visible by default.

When the overflow property of the parent element is visible, the relative element will be shown like that

Position Sticky

sticky is very useful, but it’s very strange as well. The CSS specification describes it as similar to relative . sticky works like relative until the element is positioned at a certain threshold point. A certain threshold point, in this context, refers to the values that decide an element’s position, such as top or left . But whose top and left ?

A sticky element refers to the CB of the nearest parent element whose overflow is set scroll . If none of them meet the condition, a sticky element refers to the viewport.

For example, if the top is 50px, the sticky element works like a relative element until it’s offset from the top of the CB by 50px.

Figure 1. sticky