Positioning content with CSS (the basics)

 |  CSS

Introduction

Positioning content with CSS can be done in several ways, which property will be used depends on the specifics of the layout, and on the requirements for syntax support in browsers. The basic technique for positioning content is the position property. If the value of the property is: relative, absolute or fixed, additional properties are also available: top, right, bottom, left.
As one of the solutions for content positioning, the float property can be used, but the trend is to use this property as little as possible (that is, to use it only for “wrapping the text around the block”).
The technique that is recommended and supported by most recent browsers, involves using the CSS property “display:flex”. The “display:grid” property is considered to have great potential, but it will have to wait until all browsers adopt it in practice.

The “position” property

Values of the position property can be:

  • static (default value, applied even if the position property is not used)
  • relative
  • absolute
  • fixed
  • sticky (experimental)

Static

Positioning elements without specific positioning is called static. It is considered the default behavior and does not need to be declared directly with “position: static”:

See the Pen Position demo – static by Web programming (@chos) on CodePen.

Relatives

Relative positioning is used when an element needs to be moved in relation to the position it would normally be in (when “static” positioning would be applied). After using the “relative” rule, we can use additional properties for positioning: top, right, bottom, left. These additional properties define the distance relative to where the element would be by default. An element that has the “relative” property defined is positioned the same as with the “static” property, until one of the subsequently enabled properties (top, right, bottom, or left) is applied.

See the Pen Position: relative by Web programming (@chos) on CodePen.

As you can see, “Box 2” has been moved, but the place where it would be without additional positioning is still “occupied”, so “Box 4” has not moved up.

Fixed

The “fixed” element is bound to the window frame (eng. viewport), so it always stays in the same place regardless of whether the page is scrolled.

See the Pen Position: fixed by Web programming (@chos) on CodePen.

Absolute

An absolutely positioned element behaves similarly to a “fixed” element in that its position is not bound to the window frame, but to the first (closest) parent element that is not a statically positioned element. If the element has no such parent element, it is “bound” to the body element.

See the Pen Absolute Positioning by Web Programming (@chos) on CodePen.

In the previous example, Box 3 is absolutely positioned, and its first “non-static” parent element is Box 2. Therefore, Box 3 is bound to the edges of Box2. If there were no non-statically positioned parent, Box 3 would bind to the body element, as seen in the following example.

See the Pen egjaaV by Web programming (@chos) on CodePen.


The “float” property

By using this property, the elements are not indicated where they should be, but are left to find their own position by following certain rules. Depending on the value of the property (left or right) the element that is not arranged will “flow” in that direction. Elements on which the float property is applied behave like blocks, ie. as if they were given the “display block” property.

Standard “flow”

Example: flowing to one side

In this example, the first element that has the value |float:left” will flow from the far right edge to the left until it finds its place. Each subsequent one will tend to flow to the right of the previous element. If the block has no room to position itself to the right of the last element, it descends below the block that interferes with it and flows to the left again (“on a new level”). This is best seen in the following example.

See the Pen Float by Web Programming (@chos) on CodePen.

Example: flowing on both sides

In this example, both left and right flow are used:

See the Pen Float 2 by Web programming (@chos) on CodePen.

The first block with the property float:right (“ON RIGHT 1”) was not positioned in the upper right corner, as expected at first glance. This happens becauseis the previous float block placed lower (it doesn’t matter that it is float:left), so the “RIGHT 1” block must also be at its level.

Text wrap around the float element

Positioning content with the float property can be very demanding, so it is used less and less, and simpler methods (flex, grid…) take precedence. However, the float property is considered indispensable when it comes to “wrapping a block” with text. He tries to make the text fit as well as possible into the space available to him and envelops the block.

See the Pen zNJvzM by Web programming (@chos) on CodePen.

Breaking the flow

When we want a float element to start from a new line, we need to apply the clear property, which prevents it from sticking to another float block as a float block. This block still has the float property, but will be positioned along the edge of the parent element.

Example

In this example, we defined the property “clear: left” to the block “4”, so this block “does not stick” to the previous float element, but goes to a new line and sticks to the left edge.

See the Pen Float break by Web programming (@chos) on CodePen.

Removing the float property

One method is to insert an empty block that has the property clear: both;

Another way is to use a pseudo selector that creates after the float element a new “invisible” block that has the property “clear: both”.

Problem with height of parent element

A floated element does not affect the height of its parent. Therefore, if the content of the parent block is smaller in height than the “floated” element, the “floated” element will stick out. An even more extreme case is when the parent block only has “children” with the float property, then it will have no height at all! Look at the picture to the right. This problem is solved by adding the overflow: auto;

property to the parent element

See the Pen float parent solution by Web programming (@chos) on CodePen.