CSS Positioning Guide

Get better at CSS Positioning

An in-depth guide to become good at CSS Positioning or the CSS Position property.

CSS Position Property is used to position an element in a html document. Position value can be any one of the following

  • static (by default)
  • relative
  • absolute
  • fixed
  • sticky


Every element is positioned as static by default. This means that element will adhere to the normal flow of the page. Or in other words, element will lie in its natural position where it is supposed to be.

See the Pen CSS Static Positioning by Tech Jasmine (@techjasmine) on CodePen.

You generally don’t position an element as static unless you want it to go back to its normal position from an altered position (relative or absolute). This is useful when there is a change in the layout or in case of responsive design.


If you set an element’s position as relative, you can move it around with other properties namely top, bottom, left and right. These properties refer to the distance an element should displace from its parent. The properties top, bottom, left and right can be in terms of any css units such as px, %, ems, rems etc.

For example, left: 30px moves an element 30px from its left edge away from the parent.

See the Pen CSS Relative Positioning by Tech Jasmine (@techjasmine) on CodePen.

Important point to note here is that child element moves relative to its parent.


This is an important CSS Position property which is often misunderstood. Absolute property positions the element relative to the Document (and not its parent). Yes, you can re-read the sentence again.

Document in general context means the device screen. So left: 5% and top: 10% for an absolutely positioned element moves it 5% from the left edge of the screen and 10% below from the top edge of the screen.

See the Pen CSS Absolute Positioning by Tech Jasmine (@techjasmine) on CodePen.

The parent element has no longer any control over the position of the child element. Technically speaking, element will be removed from the normal flow in the document.

There is more to absolute and relative positioning.

You can also absolute position an element relative to its parent. This means the movement of the element is relative to its parent once again and not the document.

This is used more often when building layouts especially in case of UI elements such as Cards with Buttons, Modals with Close Button.

See the Pen Relative + Absolute Position by Tech Jasmine (@techjasmine) on CodePen.

You may have a question in your mind, why we cannot use position : relative on the child element itself. Relative positioning is generally good for small movements or nudging the element. But if you completely want to reposition an element from its natural position position : absolute will be a better choice.


The position : fixed property is very similar to position : absolute in terms of placement of the element relative to the document or screen. But the element isn’t affected by scroll movement. This means element remains put in the same place, even if you scroll to the bottom of the page.

See the Pen CSS Fixed Positioning by Tech Jasmine (@techjasmine) on CodePen.

The typical use case of fixed positioning is for navbar or a sidebar which needs to be fixed to the top or side of the screen for swift navigation.


The position : sticky is a new kid on the block. It may not have support across all browsers, but it sure is increasing every day. Recent versions of major browsers support it.

See the Pen CSS Sticky Positioning by Tech Jasmine (@techjasmine) on CodePen.

Its an interesting property which can be considered as a good mix of position : relative and position : fixed. The child element remains fixed or stays put when scrolling the parent element, but never exceeds its boundary.

Typical use case may be social share buttons for a blog post or a table header in a long data list.

Here are some cool things which you can do with your new knowledge of CSS Positioning.

  • A Fixed Navbar
  • Sticky Call to Action
  • Modal or Card with Close Button

See the Pen Cool things with CSS Positioning by Tech Jasmine (@techjasmine) on CodePen.

World is your Oyster. Have fun !

More Resources

I hope I have made CSS Positioning a bit easy for you.

Keep Smiling, Keep Coding !

PS: If I have helped you and made a difference in your life, considering supporting my blog.

Free Online Full Stack Web Development Bootcamps 2020

Hello friends, I’m going to review top Free Online Full Stack Web Development Bootcamps in 2020. I think 2020 is going to be a golden year of free online education with so many resources to kick start your web development journey.

Here is the list of free online web development bootcamps I’ll be covering in this post.

  1. freeCodeCamp
  2. The Odin Project
  3. Full Stack Open
  4. App Academy Open
  5. CS50 Web Programming


freeCodeCamp is one of the top web development resources recommended online especially to the beginners. It’s a non-profit started in the year 2014 by Quincy Larson who aims to provide top quality software education to the students for free. This initiative has helped thousands of students get jobs and earn a decent living.

freeCodeCamp offers you certifications on following topics which are divided into modules.

  • Responsive Web Design
  • JavaScript Algorithms and Data Structures
  • Front End Libraries
  • Data Visualization
  • APIs and Microservices
  • Information Security and Quality Assurance
  • Coding Interview Prep

Each modules takes about 300+ hours to complete and focuses on core topics related to HTML, CSS, JavaScript, Data Structures and Algorithms, Front end tools such as React, Redux, Bootstrap, Sass.

Backend Development is taught using NodeJS and Express and MongoDB for Database technology. So at the end of this you can call yourself an Junior Developer in MERN (Mongo, Express, React and NodeJS) Stack.

The best part what I like about freeCodeCamp is that there are detailed modules focused on improving the quality of code such as Information & Security, Quality Assurance and Testing and Project Oriented learning.

Ultimately if you spend an year on freeCodeCamp and put what you have learnt to practice, you’ll definitely be a better web developer.

The Odin Project

The Odin Project is one of the top resource since 2013. It was founded by Erik Trautman during his time as an instructor for a web development bootcamp. Main aim of the project was to provide structured learning resources or a path for beginners and learners. Before this, they were lots of resources all over the internet, but no sane way to go through all of them in a structured path.

Today The Odin Project is maintained by volunteers and backed by supporters and sponsors. The best part about The Odin Project is that it provides you a spartan way to learn web development. This means that you have to set up your own development environment, download and install stuff, tinker with command line look around for help. This is as real world as it gets with very less hand holding. Ultimately The Odin Project makes you a better developer who is self reliant.

The curriculum at The Odin Project has 3 tracks or paths

  • Full Stack JavaScript
  • Front End Only
  • Full Stack Ruby on Rails

The tracks start from web development basics (or 101 topics) and also gives you taste of real world stuff such as Text Editors, Command Line, Git. Core topics covered in the tracks are HTML, CSS, JavaScript, Ruby, Front End Frameworks, Backend with NodeJS or Ruby on Rails.

The Odin Project is one among only few free online bootcamps to teach Ruby and Ruby on Rails.

There are plethora of hands on project challenges such as Rock Paper Scissors, Etch-a-sketch, Calculator, Tic Tac Toe, Restaurant Page, ToDo List, Weather App, Battleship, Photo Tagging App, Message Board, Inventory App and finally a Social Network clone.

The Odin Project offers some insights on how to get hired.

As an interesting fact, there are few students who work on freeCodeCamp and The Odin Project side by side. They use FCC for learning theoretical concepts and TOP for practical projects.

App Academy Open

App Academy Open is a free full stack web development curriculum offered by App Academy, a top coding bootcamp in US. Apart from free track, they also offer Mentorship, live lectures, pair programming, career services which are paid premium services.

I’m gonna discuss here only about the free curriculum.

App Academy Open curriculum consists of Video Lectures + In-Browser Coding. They cover through a vast list of topics which may take over a year to complete.

  • Welcome To Coding
  • Intro to Programming
  • Full Stack Online – Intro to Programming
  • Software Engineering Foundations
  • Ruby
  • SQL
  • Rails
  • JavaScript
  • React
  • Full Stack Project
  • MERN Stack Curriculum
  • Full Stack Online – Job Search
  • Docker Curriculum
  • GraphQL Curriculum
  • Data Structures and Algorithms

Each topics are quite voluminous on their own and there are lots of projects to be completed at the end with detailed guidelines. This program will definitely help you get job ready and your projects will impress a lot of people.

Full Stack Open

Full Stack Open is a recent online web development bootcamp collaboration by Houston, a Finnish software company and The University of Helsinki (of Java Mooc.fi fame).

Full Stack Open is aimed for advanced web development learners with a focus on topics such as React, Redux, Node.js, MongoDB and GraphQL. It assumes you have a familiarity with HTML, CSS and Javascript.

The objective is to build single page applications with React that consumes API’s build with Node.

The course is divided into 9 parts on following topics

  1. Fundamentals of Web apps
  2. Introduction to React
  3. Communicating with Server
  4. NodeJS + Express
  5. Testing Express Servers
  6. Testing React Apps + Custom Hooks
  7. State Management with Redux
  8. React Routeer + Styling with CSS + Webpack
  9. GraphQL

Full Stack Open is a very professional course which is frequently updated and aims to make course learners job ready by the end of the course. This online bootcamp needs to be your priority when you have mastered the basics of web development.

CS50’s Web Programming

CS50 by legendary David J. Malan of Harvard University is a brand by itself which revolutionized the way Computer Science fundamentals are taught in the classrooms across the world.

CS50’s Web Programming with Python and JavaScript is web development focused curriculum by the makers of CS50 which can be considered as a sequel to the original course.

CS50’s Web Programming with Python and JavaScript deep dives into following topics

  • Git
  • Flask
  • SQL
  • ORMs, APIs
  • JavaScript
  • Front Ends
  • Django
  • Testing, CI/CD
  • GitHub, Travis CI
  • Scalability
  • Security

Each topic is an hour long video lecture which are followed by project with detailed guidelines. The final project is to build a web application of your choice with Python, JavaScript and SQL.

Just like CS50, this course is also very popular with web development learners. At the end of the course, you will have solid fundamentals and you can gain a fresh perspective on web development.

If you are a newbie starting to learn web development, I highly recommend you make the best use of any or all of the above Free Online Fullstack Web Development Bootcamps. Each bootcamp is unique on its own, just experiment and find out which appeals more to you. The most important part is to build a solid portfolio for yourself and develop your skills to be job ready.

That’s it for this post. Follow my blog for more resources on web development in days to come.

Happy 2020, Happy coding !

PS: If I have helped you and made a difference in your life, considering supporting my blog.