Css Positions For Beginners

Learn all about the CSS position property with examples
English [Auto]
Css position property
Examples of the use of position types


  • basic html and css


CSS positions are the properties that used to put the html elements in any place we want in the webpage. Position property allows developers create complex layout that can not be done by floats of even flex box.

The position property can help you manipulate the location of an element with the help of othe css properties.

Using this property you can choose whether to have the element be positioned according to the normal flow of the page (default), you can shift its position or “nudge” it while maintaining its position in the flow, you can position it relative to another element on the page, or you can position it relative to the viewport.

There are five position values an element can take : Static, Relative, Absolute, Fixed and Sticky.

,which each one has a different effect on the element.

All elements are by default positioned “statically” on a page. A static position defines the position of an element in the normal flow of the page. It is the default position of every element. When an element is referred to as a positioned element, it means that its position has been changed from being static, to one of four available values: relative, absolute, fixed, sticky.

There are new position values added in css3.

In this tutorial we will learn every thing about positions by practicle examples.

The examples we will create:

  • Fixed Sidebar

  • Social Media box.

  • Overlay for section.

  • Image card.

  • Menu bar with submenu.

  • Fixed Navigation bar.

  • Sales card.

  • Much More.

Students must have some basic knowledge in html and css in order to understand the examples.

There are a lot of css properties work with positions or in another word make the position proterty have their strength.

those properties are: top, bottom, left, right and z-index.

We will learn about those properties also.

Who this course is for:

  • Beginner web developers
  • Any one who are learning html and css

Course content

5 sections9 lectures53m total length
  • Introduction


Software developer
Norhan Khafaga
  • 3.9 Instructor Rating
  • 73 Reviews
  • 6,159 Students
  • 2 Courses

I am a Freelancer software developer and programming languages tutor, I have experience in some programming languages like c++, python, JavaScript, matlab and PHP. I have a big experience in working in front-end web developing  using html5 ,css3,Js, jQuery and bootstrap framework,also I have some experience in qt and opencv library.