How to Use the Position Property in CSS to Align ElementsCem EygiBlockedUnblockFollowFollowingSep 18, 2018Photo by Sai Kiran Anagani on UnsplashPositioning elements with CSS can be tricky in web development.
Things can quickly get complicated as we add more elements to the webpage.
Therefore, it is essential to know how to use CSS for aligning elements.
It will also save us time while coding.
There are many different ways/methods for positioning elements.
You can use pure CSS properties like float, position, display, or new layout modules like CSS Flexbox, Grid, or a framework like Bootstrap.
I will be covering each of them one by one in the future, but for this piece, we are going to focus on CSS position property.
CSS Position & Helper PropertiesThere are five main values of CSS Positions:position: static | relative | absolute | fixed | stickyand properties for setting the coordinates of an element (I call them “helper properties”):top | right | bottom | left AND z-indexNote: Helper properties don’t work without a declared position, or with position: static.
What is this z-index?We have height and width (x, y) as two dimensions, z is the third.
As an element’s z-index value increases, it moves in front of other elements.
Z-index also doesn’t work with position: static or without a declared position.
Elements are ordered from back to front, as their z-index increaseNow let’s explain the CSS position values in detail.
Staticposition: static is the default value.
Whether we declare it or not, elements are positioned in normal order on the webpage.
Let’s give an example:First, we define our HTML structure:Then, we create two boxes and define their positions:same result with & without position: staticDiv’s are block elements by default, and that’s why they are not on the same line.
RelativeWith position: relative, an element’s new position is relative to its normal position.
Starting with position: relative and for all non-static position values, we are able to change an element’s default position.
But only defining position: relative is not enough, we also need to set the element’s coordinates with helper properties.
Let’s move the orange box from before next to the blue one:Orange box is moved 100px to bottom & right, relative to its normal positionNOTE: Using position: relative for an element, doesn’t affect other elements’ positions.
3.
AbsoluteUnlike position: relative, where the element is positioned relative to itself, an absolute positioned element is relative to its parent.
An element with position: absolute is removed from the normal document flow.
It is positioned automatically to the starting point (top-left corner) of its parent element.
If it doesn’t have any parent elements, then the initial document <html> will be its parent.
Since position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage.
Let’s add a container as parent element:And change its position value to absolute:position: absolute takes the element to the beginning of its parentIt looks like the blue box has disappeared, but it hasn’t.
The blue box behaves like the orange box is removed, so it shifts up to the orange box’s place.
Let’s move the orange box by five pixels:The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position.
Otherwise, helper properties position the element relative to the initial <html>.
container { position: relative; background: lightgray;}4.
FixedLike position: absolute, fixed positioned elements are also removed from the normal document flow.
The differences are:They are only relative to the <html> document, not any other parents.
They are not affected by scrolling.
Here in the example, I change the orange box’s position to fixed, and this time it is relative five pixels to the right of the <html>, not its parent (container).
As we can see, scrolling the page doesn’t affect the fixed positioned box.
It is not relative to its parent (container) anymore.
5.
Stickyposition: sticky can be explained as a mix of position: relative and position: fixed.
It behaves until it reaches a declared point, like position: relative, and afterwards changes its behavior to position: fixed.
The best way to explain position: sticky is through an example:IMPORTANT: Position Sticky is not supported by Internet Explorer or earlier versions of Edge.
That’s about it for the CSS Position Property.
It may seem complicated at the beginning, so the best way to understand it is by practicing.
Keep coding and experimenting until you have a better understanding.
If something is not clear, leave a question in the comments and I’ll do my best to answer it.
.