CSS Positions For Beginners

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.
• A ribbon.
• 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.