# Relative Positioning

If we want to [precisely position](http://alistapart.com/article/css-positioning-101) an element,  floats or inline-block elements won’t do the trick. 

:point\_right: Floats, which remove an element from the flow of a page, often produce unwanted results as surrounding elements flow around the floated element. Inline-block elements, unless we’re creating columns, can be fairly awkward to get into the proper position. For these situations we can use the `position` property in connection with box offset properties.

The `position` property identifies *how* an element is positioned on a page and whether or not it will appear within the normal flow of a document. This is used in conjunction with the box offset properties—`top`, `right`, `bottom`, and `left`—which identify exactly *where* an element will be positioned by moving elements in a number of different directions.

By default every element has a `position` value of `static`, which means that it exists in the normal flow of a document and it doesn’t accept any box offset properties. The `static` value is most commonly overwritten with a `relative` or `absolute` value, which we’ll examine next.

#### Relative Positioning

The `relative` value for the `position` property allows elements to appear within the normal flow a page, leaving space for an element as intended while not allowing other elements to flow around it; however, it also allows an element’s display position to be modified with the box offset properties. For example, consider the following HTML and CSS:

```markup
<div>...</div>
<div class="offset">...</div>
<div>...</div>
```

```css
div {  
height: 100px;  
width: 100px;}
.offset { 
 left: 20px;  
 position: relative; 
 top: 20px;}
```

Here the second `<div>` element, the element with the class of `offset`, has a `position` value of `relative` and two box offset properties, `left` and `top`. This preserves the original position of the element, and other elements are not allowed to move into this space. Additionally, the box offset properties reposition the element, pushing it `20` pixels from the `left` and `20` pixels from the `top` of its original location.

With relatively positioned elements, it’s important to know that the box offset properties identify where an element will be moved from given its original position. Thus, the `left` property with a value of `20` pixels will actually push the element towards the right, from the left, `20` pixels. The `top` property with a value of `20` pixels, then, will push an element towards the bottom, from the top, `20` pixels.

When we position the element using the box offset properties, the element overlaps the element below it rather than moving that element down as the `margin` or `padding` properties would.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://irena-popova.gitbook.io/boost-your-css-skills/positioning-content/relative-positioning.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.