--- title: "Positioning in CSS3" description: "The position property gives the elements in different types of positioning, position have five types of property:1.Position2. Top3.Right4.Bottom5.Left" author: "Vijay Shukla" published: 2013-01-08 updated: 2014-09-18 canonical: https://www.mindstick.com/blog/425/positioning-in-css3 category: "css-css3" tags: ["css-css3"] reading_time: 2 minutes --- # Positioning in CSS3 The position [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) gives the [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) in different types of positioning, position have five types of property: 1. Position 2. Top 3. Right 4. Bottom 5. Left Above property have some values these are given below: **1.** Position a. Static It is [default value](https://www.mindstick.com/forum/2035/default-value-when-using-singleordefault) of position. Here is elements [render](https://www.mindstick.com/articles/13048/questions-that-render-a-helping-hand-for-hiring-dedicated-wordpress-developer) in order, as they appear in the [document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool) flow. b. [Relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css) The element is positioned relative to its [normal position](https://www.mindstick.com/forum/158662/what-is-the-css-property-used-to-control-the-position-of-an-element-relative-to-its-normal-position). c. [Absolute](https://www.mindstick.com/interview/1159/what-is-absolute-and-sliding-expiration-in-dot-net) The element is positioned relative to its first positioned (not static) forbear element. d. Fixed The element is positioned relative to the [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser) window. **2**. Top a. here given the value in pixels (top: 10px) b. here given the value in percentage (top: 10%) ##### 3. Right a. here given the value in pixels (right : 10px) b. here given the value in percentage (right: 10%) ##### 4. Bottom a. here given the value in pixels (bottom : 10px) b. here given the value in percentage (bottom: 10%) ##### 5. Left a. here given the value in pixels (left: 10%) b. here given the value in percentage (left: 10%) ##### Position Examples: ##### CSS Code: ``` ``` ##### Positions: ``` position:static;position:relative;position:absolute;position:fixed; ``` ##### Body Code: ```

This is second div

``` ##### Output: ![Positioning in CSS3](https://www.mindstick.com/blogs/54eefdf4-2d6e-4018-8531-ea52319058f1/images/b507e7fa-9ea9-4e41-966e-5538f6c3754a.png) --- Original Source: https://www.mindstick.com/blog/425/positioning-in-css3 Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.