Let’s talk about the position property in CSS in my humble view.
What is?
The position property are responsible for the positioning of the any HTML element in the whole document.
CSS Position:
There are more than one type of positioning: static, relative, absolute, fixed, sticky, initial, and inherit.
But I’ll talk in particular about relative, absolute and fixed and the difference between them , so let us know what are those types with this simple definition to each of these concepts.
- Relative: a relative position without other attributes means that element is relative to it self so it should not had any effect on his positioning.
- Absolute: this type of positioning like a superpower in CSS, it gives you the possibility to place any page element where you want and over any element you want on the page where you want.
- Fixed: it’s like absolute position but not for a relative element but for the whole document. If the element have an fixed position will not disappear when you scroll in the page.
Cases In action:
- Position absolute, this example gives you a clear view about absolute position. Check HERE
- Position fixed, this example gives you a clear view about fixed position. Check HERE
- Position relative, no need for an example. If you didn’t applied attributes (Top, right..) on the element and you just used position: relative you will not have any changes on the element.
The difference in this short summary:
The position: relative means the element position will be based on his starter and current position without changing, the position: absolute you have the right to place the element in any place provided that have a parent element with relative position, position: fixed will give your element the position over the other elements of the page even on the scroll.
Avoid to use:
The absolute position is one of the best CSS property that is easy to use, especially for junior developers because it solve a lot of problems, personally I used to work with it in several works haha, but I learnt what I'am trying to explain for you now..
Problem 1 :
Let’s suppose that you are working on project that required to be responsive and should be accessible in different machines, it will cause a problem.. you will be required to work in all the resolution using Media Queries, and this isn’t a practical process.
Problem 2:
When we use absolute position a several CSS Properties who using with pixels like margin or padding will don’t be shown the same when you’re changing the resolution or break the browser point.
So try to use absolute position in special and necessary cases, you will learn to do that with practice.
And don’t use “pixels” when you’re using “absolute” position.. use “%” you will save a lot of work and time.
More Information
Originally posted on my blog
That's all, thank you!
Top comments (0)