# Position Property
The `position` property in CSS is a fundamental aspect of layout control. It allows you to precisely position elements on a webpage relative to their containing block or the viewport itself. There are five main values for the `position` property: `static`, `relative`, `absolute`, `fixed`, and `sticky`. Let's delve into each of these values with examples to better understand their behavior.
### 1. Static Position
The `static` value is the default position property for all HTML elements. Elements with a static position are positioned according to the normal flow of the document. In other words, they appear on the webpage in the order they are written in the HTML document.
```css
.static-box {
position: static;
}
```
```html
This is a static box.
```
### 2. Relative Position
When an element is positioned relatively, it is still considered part of the normal document flow, but you can adjust its position relative to its normal position.
```css
.relative-box {
position: relative;
top: 20px;
left: 20px;
}
```
```html
This is a relatively positioned box.
```
### 3. Absolute Position
Elements with an `absolute` position are removed from the normal document flow, and their position is calculated relative to the nearest positioned ancestor (an ancestor element whose position is not `static`). If no such ancestor exists, it is positioned relative to the initial containing block, which is typically the `` element.
```css
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
}
```
```html
This is an absolutely positioned box.
```
### 4. Fixed Position
Fixed positioning removes the element from the normal document flow and positions it relative to the viewport, meaning it will stay fixed in its position even when the page is scrolled.
```css
.fixed-box {
position: fixed;
top: 20px;
right: 20px;
}
```
```html
This is a fixed-positioned box.
```
### 5. Sticky Position
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relatively positioned until it reaches a specified threshold, at which point it is treated as fixed until the scrolling crosses the threshold again.
```css
.sticky-box {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
}
```
```html
This is a sticky-positioned box.
```
### Conclusion
Understanding the `position` property and its various values is essential for creating complex and responsive layouts in CSS. Experiment with these values to achieve the desired positioning effects in your web projects.
---
# 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://guvi.gitbook.io/fsd/docs/module-2-html-css-bootstrap/css/position-property.md?ask=
```
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.