From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Position: Relative and absolute

Position: Relative and absolute - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Position: Relative and absolute

“

- [Instructor] The position property can also be used to change the flow of the document by arranging elements relative to its current position, its containing element, or the browser viewport. While position isn't used for creating full page layouts, it is useful for fine-tuning the components within the page. Let's look at how relative and absolute positioning works in a CodePen example. I've created a basic page layout with no floats or an other layout styles. Just some styles to distinguish the components from each other. Let's start by taking a look at the relative value. In this example, the box is located within the main content area. It uses a class called relative. Let's find it in the CSS panel. It's down on line 31. Let's go ahead and add that style in. Relative is the only positioned element that stays in the layout flow. So adding this value doesn't automatically change its position. But now, we can add…

Contents