By the end of this chapter you should have:

an understanding of different methods of positioning elements on a webpage (including static, relative, absolute, fixed, sticky)
an awareness of how relative positioning allows children elements to be placed within the parent elements coordinate space
the ability to position children elements according to top, right, bottom, or left sides of its parent
an understanding of selecting appropriate semantic elements to mark up and redefine the style of content. </aside>

New Positions

In MMCC2039 we addressed how to position elements using a variety of layout approaches: from margins, to flex/grid, and floating elements. While there are suitable reasons to use each approach to arrange and position elements, there will be times where these approaches are unable to achieve what you want. We’re going to introduce you to a new CSS property and its values: position.

Gratuitous animation effect. (Serves no useful purpose here.)

`position`

The position property determines how an element is positioned within the document and whether its location can be adjusted using the top, right, bottom, and left (or inset) properties. Different positioning modes (static, relative, absolute, fixed, and sticky — described in more detail below) define how the element is laid out and what it is positioned relative to.

The position property allows five different modes:

`static`	This is the default setting for HTML elements. A static positioned element is always positioned according to the normal flow of the page.
`fixed`*	An element with a fixed position is positioned relative to the browser window. It will not move even if the page is scrolled. Fixed position elements are removed from the normal flow, and their presence has no effect on other elements.
`relative`*	A relative position element is positioned relative to its normal position. For example, you can provide an offset to the left or right, and top or bottom (this can be positive or negative).
`absolute`*	An absolute position element is removed from the normal flow. Its position is relative to its first parent element that has a position other than static. If no such parent element is found then the containing element is the body. Absolute position elements can be stacked on top of each other using the z-index property. The lower the number the further towards the back, the higher the number the further towards the front.
`sticky`	Sticky is kind of like a mix between `relative` and `fixed`. The element will move on scroll, but will remain stuck to a visible portion of the screen (set by you) as its initial location moves offscreen.

These properties enable four other properties, but two are often used mutually exclusively:

top and bottom (values set in a CSS unit of measurement, eg. pixels)
left and right (values set in a CSS unit of measurement, eg. pixels)

You can use both left and right on an element and it will have the effect of stretching it to reach the width/sides of the parent. Similarly setting both top and bottom on an element will have the effect of filling the height of the parent.

</aside>

We’re going to show you a really useful trick using absolute positioned elements inside of a relatively positioned element.

Absolute inside Relative

Using absolute position elements nested inside relative position elements open the doors to some neat tricks. Take this captioned image of Batman as an example:

An image with an overlaid caption. Having layered elements co-exist in space like this requires us to use CSS positioning (or grids).