CSS Layout - The position Property

In this chapter, we'll take a look at how the various CSS layout properties can be used to influence the sizing, positioning and overall layout of a page. I have also included a number of puzzles to help you review the things you have learned in the previous chapters.

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

This chapter is organized by use case rather than by property or feature. First, I'll talk about sizing and positioning, then I'll focus on two specific use cases: grid-based layouts and horizontal and vertical centering.

The position Property

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

CSS layout tricks and techniques used for sizing

Sizing-related techniques allow you to define how a particular element should be sized; how it should grow and how it should shrink as the viewport size changes.

• Height transfer
• Forced min-height
• Combining flex and non-flex items
• Sizing with constraints

Height transfer. Unlike basic HTML documents, web applications often want to make use of all of the available space in the viewport while avoiding scrolling. However, a typical HTML document contains several root elements that are display: block by default. If those blocks do not have a specified height, they will simply use the height of their content rather than the height of the viewport. The following snippet forces the html and body tags to take up 100% of the viewport height, which then lets you use percentages in subsequent markup to refer to viewport height:

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

Example -

div.static { position: static; border: 5px solid #4d593b; }

Run Example

position: relative;

Positioning is at the heart of layout: perhaps the most important task is to place elements in the correct relative positions across all screen sizes. The techniques in this section allow you to accomplish that.

• Relative + absolute positioning
• Negative margins
• Transforms
• margin: auto
• Positioning with constraints

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div.relative { position: relative; left: 35px; border: 5px solid #4d593b; }

Run Example

position: 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. The top, right, bottom, and left properties are used to position the element.A fixed element does not leave a gap in the page where it would normally have been located.

div.fixed { position: fixed; bottom: 0; right: 0; width: 200px; border: 5px solid #4d593b;; }

Run Example

position: absolute;

Relative + absolute positioning. position: absolute is powerful because you can align elements at an offset from the top, bottom, left or right sides of their parent box. However, in most cases, you don't actually want to position a div relative to the viewport - you want it to be positioned relative to particular parent.

You can use a combination of position: relative and position: absolute to accomplish this. Set the parent to position: relative, and then use position: absolute for the child element.

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Setting position: relative does not affect the positioning of elements in normal flow unless you add offsets, but does cause those elements to be considered to be positioned. As you may remember, absolutely positioned elements are positioned relative to their first positioned ancestor in the HTML markup, so this in effect creates a new top / bottom / left / right zero point for the absolutely positioned box.

div.relative { position: relative; width: 500px; height: 300px; border: 2px solid #4d593b; } div.absolute { position: absolute; top: 70px; right: 0; width: 300px; height: 200px; border: 2px solid #4d593b; }

Run Example

position: sticky;

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

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: #abbf8f; border: 2px solid #4d593b; }

Run Example

Overlapping Elements

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Run Example