The right Position

Position basics in CSS

What are positions in CSS?

Positions in CSS are when you place elements on a web page, it is important to specify how they are displayed in relation to each other or their parent element. Positions help you to set this. There are 5 main positions in CSS, but for this post, I will be looking at these 4 very important ones Static, Relative, Absolute, and Fixed.


Every element has a position:staticproperty by default. An element with position static is an unpositioned element due to the fact that it flows in the normal rendering sequence of the web page. It is easy to think the static position is the same as the relative position, that could be true except that static elements don't obey the left, right, top, and bottom rules.


When a child element has the position:relative property, it takes up a position that is relative to its parent element.

This enables the child element to take up a position that considers the dimensions of the parent element.


If a child element is given the position:absolute property, it will behave like the parent element is not there, and will be positioned automatically to the starting point which is the top-left corner of its parent element. If it doesn't have any parent elements.


Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll.

CSS position has always been a tricky topic for me, but over time I’m beginning to get a hang of it through usage. So I’ll advise you to implement these positions often in order to find out for yourself, what they really do.




Full-Stack Software Engineer / New York City /

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to set up Apollo GraphQL in Next.js

Using the useState hook in ReactJS

Create API documentation for Moleculer.js using OpenApi Part 1

JavaScript Empty Values

Reactive programming and Observable sequences with RxJS in Node.js

Working with Ember.js: Part 1

Taking the Plunge from React to React Native (and How I Fastened My Lifejacket)

Day 134 — Setting up Enemy AI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel C Reyes

Daniel C Reyes

Full-Stack Software Engineer / New York City /

More from Medium

Mobile Responsive CSS Grid made easy!

Don’t be shy, let’s try using ­

Guessing Game

CSS @keyframes: Bounce

HTML code describing the team-member class.