CSS Positions

Understand CSS Positions

Many of us must aware about CSS positions, but very few have knowledge of the same. Yes I mean it. There are 5 ways we can define position to elements. But most probably we use relative only.

I am front end developer and have big experience working with JAVA and PHP developers. And from the experience I found that developers cannot understand CSS because of their unlikeness and by reading this I want to be kind to them.

Here I am about to explain little but very useful material from the stack of CSS properties. (If you are front end developer or UI developer you can extend this post by adding comments).

There are 5 ways
to manage elements with
CSS Positions

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Inherit

Static

If you do not add specific position to the element, it would be static. We can say position: static is the default position by universal web standards.

Here is an example to clear your mind. I am assuming 3 different DIVs (or Block) and I would target middle DIV as a different class names.

Following code snippet will be used to understand Static CSS Positioning.

Position Static: HTML and CSS Code

StackWe have 2 snippets above. First is the common for all DIVs inside the class “.example“. And second snippet is specifically for Static DIV.

In second CSS code snippet you can find class name “.example div.static” considering DIV is being associated using static position. You can see I have given position: static and left: 33.33%. Please check example for static here to see the output with static positioning property.

In example you will not find any DIV moved 33.33% from left side. What does that mean? That means you cannot use static position if you want to move element with any of four positions (top, right, bottom, left).

Static position creates only stack. Means one block on another. This you can use while you have to design single page website which generally form the stack structure.

Relative

I was facing an UI issue and while I give position: relative, it was suddenly fixed.

I am sure you heard such a communication by many developers. You can solve many issue with position relative. I can list down two common issues below that you have surely faced in your project.

  • Z-index
  • DIV inside the some class behaving odd way (stick to some position – top, right, bottom or left)

Now let me draw an assumption to make position: relative more clear in to your eyes.

We have assumed 3 blocks to understand static position and now we have the same blocks again with different class name for second block. And we will follow the same trend for all examples.

Below are the code snippets.

Position Relative: HTML and CSS Code

Position: relative

From above example you can see that we have used class relative just to add position: relative. There is no other change. If you you would open example for relative then you realize the change. In the example you will see second DIV is moved by 33.33% from left and still the third DIV is not moving up (because of blank space).

So should we use position: relative to adjust element from any position? I would say yes in some specific scenario but most probably you should adjust with margin and padding.

If you are front end developer you might noticed z-index is not working without position: relative property to element. And if it works then it should inherited relative position.

I will explain second point listed above that you can fixed using position: relative in “Absolute” positioning description.

Absolute

Position absolute is one of the tricky position that can be learned with the period of time. If you do not aware about position: absolute,  is not suggested to use. Because it can arise many issues in a project.

If you give position: absolute to element it would consider entire window as a stage to move within given boundary. We have below snippet, please have a look carefully.

Position Absolute: HTML and CSS Code

Position Absolute

If you compare the snippet with previous two HTML snippets, you will realize that I have added extra class beside class “.example“. This would just give relative position to the DIV and removes additional properties given to common DIVs.

The reason to do so it to decide the boundary for “.absolute” DIV. Better you can see the example for absolute.

 

Fixed

You might noticed STICKY HEADER and FOOTER sections on website or blog. It is running trend from 2012. With the fixed position you can fix element with desired position.

It is almost similar to position: absolute. But the only and important difference – it doesn’t consider position: relative (of parent DIV) as a boundary.

Position Fixed: HTML and CSS Code

Position Absolute

Comparing with “.absolute” we have “.fixed” having property “position: fixed” and nothing else. I have also added “.outer” class beside “.example” DIV to give position: relative just as in previous example of “Absolute”. You should have a look example for fixed (and compare with example for absolute to get exact idea.)

Inherit

If you are developing a site and you need to place one DIV into another then such a kind of structure called hierarchical structure in coding terms. And position: inherit is something that you can use to get position of the parent DIV.

Position Inherit: HTML (without OUTER), HTML (with OUTER) and CSS Code

Position InheritYou can find 2 images separated by vertical line. Both are example of position: inherit. But you can see 2nd block moving 33.33% from left. This is because of inherited position of “.OUTER” DIV. Example for inherit can make you convince.

 

Conclusion

  • The default position of the element is STATIC
  • With the RELATIVE position you can control the ABSOLUTE position
  • Trendy look with sticky header and footer can be achieved with FIXED position
  • You do not need to add additional position property if you want to use PARENT one
CSS

3 Responses to “Understand CSS Positions”

  1. I found easy to pick example on the same topic (as a single page):
    http://www.barelyfitz.com/screencast/html-training/css/positioning/

  2. […] see it is coming with position: fixed. As a front-end-developer you should aware about different CSS-POSITIONS. It behaves considering the browser window as a stage. We can say BODY / HTML as a parent […]

  3. […] see it is coming with position: fixed. As a front-end-developer you should aware about different CSS-POSITIONS. It behaves considering the browser window as a stage. We can say BODY / HTML as a parent […]

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.