- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS Advanced
- CSS - Flexbox
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- Q&A
CSS - position
CSS Position Property
CSS property position helps manipulate position of an element in a web page. The properties top, bottom, right, and left are used to control its exact position on the page. They specify the offsets of an element from its edges
Property position can be used to create floating elements, floating sidebar, and other interactive features.
Following are the possible values:
static − The element is positioned according to the default or normal flow of the page. So if we set left/right/top/bottom/z-index, then there will be no effect on that element.
relative − The element's orginial position is according to normal flow of the page just like static value. But now left/right/top/bottom/z-index will work. The positional properties push the element from the original position in that direction.
absolute − The element is completely removed from the document flow. It is then positioned with respect to its containing block, and its edges are placed using the side-offset properties. An absolutely positioned element may overlap other elements, or be overlapped by them.
fixed − The element's fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. Here the element is totally removed from the document's flow and does not have a position relative to any part of the document.
sticky − The element sticks to the top of its nearest positioned ancestor that has a "scrolling mechanism" .
CSS Position - Demo
Try to select different values for CSS position property and then see the effect.
CSS Position - Static
When you use the CSS position: static property, the element will be positioned normally in the document flow. The left, right, top, bottom, and z-index properties will not affect the element. This is the default value.
Example
Here is an example −
<html> <head> <style> .normal-box { display: inline-block; background-color: #f2c3ee; border: 1px solid #000000; padding: 10px; margin-bottom: 20px; width: 300px; height: 100px; } .static-box { display: inline-block; position: static; background-color: #bbedbb; border: 1px solid #000000; padding: 10px; width: 300px; height: 100px; } </style> </head> <body> <div class="normal-box"> <h2>Normal Box</h2> <p>This is a normal box.</p> </div> <div class="static-box"> <h2>Position: static</h2> <p>This is a box with static position.</p> </div> </body> </html>
CSS Position - Relative
The CSS position: relative property positions the elements relative to their original position in the page. You can use the left, right, top, and bottom properties to move the element around, but it will still take up space in the document flow.
Example
Here is an example −
<html> <head> <style> .normal-box { display: inline-block; background-color: #f2c3ee; border: 1px solid #000000; padding: 10px; margin-bottom: 20px; width: 300px; height: 100px; } .relative-box { display: inline-block; position: relative; left: 30px; background-color: #bbedbb; border: 1px solid #000000; padding: 10px; width: 300px; height: 100px; } </style> </head> <body> <div class="normal-box"> <h2>Normal Box</h2> <p>This is a normal box.</p> </div> <div class="relative-box"> <h2>Position: relative</h2> <p>This is a box with relative position.</p> </div> </body> </html>
CSS Position - Absolute
An element with position: absolute is taken out of the document flow and positioned relative to its nearest positioned ancestor (if any). If there is no positioned ancestor, then the element is positioned relative to the viewport.
You can use top, right, bottom, and left properties to specify the position of the element relative to its containing block.
Example
Here is an example −
<html > <head> <style> .normal-box { background-color: #f2c3ee; border: 1px solid #333; padding: 10px; margin-bottom: 20px; width: 350px; height: 100px; } .absolute-box { background-color: #bbedbb; border: 1px solid #333; padding: 10px; position: relative; width: 300px; height: 100px; left: 20px; bottom: 20px; } </style> </head> <body> <div class="normal-box"> <h2>Normal Box</h2> <p>This is a Noraml box.</p> <div class="absolute-box"> <h2>Position: Absolute</h2> <p>This is a box with absolute position.</p> </div> </div> </body> </html>
CSS Position - Fixed
To make an element stay in the same place on the screen even when the user scrolls, you can set the position property to fixed. You can then use the left, right, top, and bottom properties to position the element where you want it.
Example
Here is an example −
<html> <head> <style> .position_container { width: 400px; height: 200px; background-color: #f2c3ee; overflow: auto; padding: 5px; } .fixed-position { position: fixed; top: 15px; left: 60px; padding: 5px; background-color: #bbedbb; text-align: center; } </style> </head> <body> <div class="position_container"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="fixed-position">Tutorialspoint CSS Position Fixed</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </body> </html>
CSS Position - Sticky
You can set the position property to sticky to create an element that sticks to the top of the viewport when the user scrolls through a page.
The position: sticky property is a combination of the position: relative and position: fixed properties
Example
Here is an example −
<html> <head> <style> .position_container { width: 400px; height: 200px; background-color: #f2c3ee; overflow: auto; padding: 5px; } .sticky-position { position: sticky; top: 15px; padding: 5px; background-color: #bbedbb; text-align: center; } </style> </head> <body> <div class="position_container"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="sticky-position">Tutorialspoint CSS Position Sticky</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </body> </html>
CSS Positioning Text In an Image
In following example, you can use the position: absolute property to position text in different directions. The text elements are positioned at the top left, top right, bottom left, and bottom right corners.
Example
Here is an example −
<html> <head> <style> .container { position: relative; border: 2px solid #ef2c2c; } .center { position: absolute; top: 45%; width: 100%; text-align: center; } .top-left { position: absolute; top: 12px; left: 30px; } .top-right { position: absolute; top: 12px; right: 30px; } .bottom-left { position: absolute; bottom: 12px; left: 30px; } .bottom-right { position: absolute; bottom: 12px; right: 30px; } img { width: 100%; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px"> <h3 class="center">Text at Centered</h3> <h3 class="top-left">Text at Top Left</h3> <h3 class="top-right">Text at Top Right</h3> <h3 class="bottom-left">Text at Bottom Left</h3> <h3 class="bottom-right">Text at Bottom Right</h3> </div> </body> </html>
CSS Position - Related Properties
Following is the list of all the CSS properties related to position:
Property | Description |
---|---|
bottom | Used with the position property to place the bottom edge of an element. |
clip | Sets the clipping mask for an element. |
left | Used with the position property to place the left edge of an element. |
overflow | Determines how overflow content is rendered. |
position | Sets the positioning model for an element. |
right | Used with the position property to place the right edge of an element. |
top | Used with the position property to place the top edge of an element. |
vertical-align | Sets the vertical positioning of an element. |
z-index | Sets the rendering layer for the current element. |