How to use CSS Position Property to align elements in web development?Explaining the five main values of the position propertyCem EygiBlockedUnblockFollowFollowingJun 10Photo by Kelly Sikkema 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 the position property:StaticRelativeAbsoluteFixedStickyand five properties for setting the coordinates of an element (I call them “helper properties”):TopRightBottomLeftZ-indexWe know that left, right, top, and bottom are the coordinates, but what is the z-index?IMPORTANT: Helper properties don’t work without a defined position or with the static position.
Explaining the Z-indexIn mathematics, we have height and width (x, y) as two dimensions.
Z is the third dimension.
An element with a higher z-index value comes 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 values of CSS positioning in detail.
1.
Staticposition: static is the default value.
Whether we declare it or not, elements are positioned in normal order on the webpage.
Let’s take a look at an example:First, we define our HTML structure:Then, we create the boxes with CSS and assign one of them a static position:By default, the boxes will each be aligned on a new line.
Position static doesn’t have any effect:Boxes with & without position: staticNote: Div’s are block-level elements and that’s why they are not positioned on the same line.
2.
Relativeposition: relative is the first value that lets us make changes to an element’s position.
position relative: An element’s new position 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 new coordinates with the helper properties.
Let’s move the orange box next to the blue one:The Orange box is moved from 100px bottom & right, relative to its old positionWhy Doesn’t the Blue Box Move Up?There is something called as normal document flow, which means all elements on the page are positioned normally side-by-side or each on a newline.
When we use position: relative, even if we can see the changes, the webpage won’t see it because position: relative doesn’t break the normal document flow.
So other elements remain in their positions.
Let’s see how other positioning values affect the normal document flow.
NOTE: Using position: relative for an element, doesn’t affect other elements positions.
3.
AbsoluteIn position: relative, the element is positioned relative to itself.
However, an absolutely positioned element is positioned relative to its parent.
Unlike position: relative, an element with position: absolute is removed from the normal document flow and automatically positioned 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 like the element is completely removed from the page.
Let’s add a container as a parent:Now, let’s change the orange box’s position value to absolute:position: absolute takes the element to the beginning of its parentAs I explained above, an absolutely positioned element is taken out of the normal document flow and placed to the starting point of its parent.
Now it looks like the blue box has disappeared, but has it?.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 five pixels and we can see it again:Now we can see the blue boxNOTE: Position absolute breaks the normal document flow, try not to use it too much.
4.
FixedLike position: absolute, fixed positioned elements are also removed from the normal document flow.
There are also some key differences:They don’t have any parents but they’re only relative to the <html> documentThey are not affected by scrollingHere in the example, I changed the orange box’s position to fixed and placed it 5px to the right of the <html>.
As we can see, scrolling the page doesn’t affect the fixed positioned box and 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 like position: relative until a declared point and then changes its behavior to position: fixed.
The best way to explain position: sticky is by looking at an example:IMPORTANT: Try to avoid using position: sticky as possible, because it isn’t supported in IE and older versions of other browsers.
https://caniuse.
com/ConclusionThat’s all about the CSS Position Property.
It may seem complicated at the beginning, so the best way to understand it is by practice.
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.
You can also check out my Youtube Channel where I further explain the Position Property:Thank you for your time & support!.