There are different ways you can position your elements through CSS. You can change the "position" attribute or you can play around with the "display" attribute of an element. Let's look at how we can change position through the "position" attribute.

Position

Every element has position attribute. This attribute can take various values: absolute, relative, static, fixed and sticky. Based on your requirement you can use different values. We set the value of left, top, right or bottom according to our needs.

Absolute

position: absolute; sets the position of an element relative to its parent element. We'll understand better with an example.

Look how the child element position itself according to its parent. It moved 20px from the top of its parent and 20px left from its parent's left border.

Relative

When you create elements in HTML, they position themselves either beside other elements or below them. position: relative; will help you move the element relative to the position they take when created. An example will clear more things up.

If you compare both the example of absolute and relative you can see a little difference.

Static

As the name suggests, position: static; will make your element static, meaning it won't move.

Fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Scroll down the result part and see the magic happens. A fixed element does not leave a gap in the page where it would normally have been located.

Sticky

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Display

There are some values of display property that positions the elements for you, according to some system. Those values are display: flex; and display: grid; .

Let's learn about them.

Flex

Flexbox is a layout module introduced in CSS3, designed specifically for building one-dimensional layouts. It provides a flexible way to distribute and align elements within a container, making it ideal for responsive designs. With Flexbox, you can easily control the alignment, direction, order, and sizing of elements, eliminating the need for complex calculations or hacks.

Key Flexbox Features:

Container and Item: Flexbox operates on a container and its child items. The container defines the flex context, while the items are flex items within that context.
Flex Direction: You can define the direction of the main axis using flex-direction, allowing you to create horizontal or vertical layouts.
Flex Wrap: By default, flex items try to fit on a single line, but with flex-wrap, you can control whether they wrap onto multiple lines when there's insufficient space.
Flexbox Alignment: Flexbox offers various alignment properties like justify-content and align-items to control the positioning of items along the main and cross axes.

justify-content and align-items can take different value. Some of them are start,end, center,flex-start and flex-end . Try changing justify-content value to space-around or space-between.

Visit the link below to learn more about flexbox.

Flexbox MDN link

Grid

CSS Grid is a two-dimensional layout system that allows you to create complex, grid-based designs. Unlike Flexbox, which focuses on one-dimensional layouts, CSS Grid enables you to define both rows and columns, providing a more robust and versatile layout mechanism.

Key CSS Grid Features:

Grid Container: Similar to Flexbox, CSS Grid operates on a container and its child items. However, it introduces a grid context with both rows and columns.
Grid Template Areas: Using grid-template-areas, you can define named grid areas and easily position elements within the grid, providing a high level of control over the layout.
Grid Gap: You can specify the size of gaps between grid cells using grid-gap, allowing you to create consistent spacing and improve the readability of the layout.
Grid Line-Based Placement: CSS Grid provides precise control over item placement using grid lines. You can specify start and end positions for items, enabling fine-grained control over their positioning.

Look how display: grid helped us to position the children elements in a grid format. You can do much more with grid. Visit the link below to learn more about it.

Grid MDN Link

This was all about how you can position your elements using different properties of an element. You can manually change the position using position: property or you can let CSS position the elements for you using display: flex or grid . Remeber we use position: on the element we want to move and display: flex or grid on the element's parent.

All about Positioning in CSS

Table of contents