- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- 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 - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- 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
- 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 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
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS - position
Description
The position property is used in positioning an element. It can be used in conjunction with the top, right, bottom and left properties to position an element where you want it.
Possible Values
static − The element box is laid out as a part of the normal document flow, following the preceding element and preceding following elements.
relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.
absolute − The element's box is laid out in relation to its containing block, and is entirely removed from the normal flow of the document.
fixed − The element.s box is absolutely positioned, with all of the behaviors which are described for position: absolute. The major difference is that the containing block of a fixed-position element is always the viewport.
DOM Syntax
object.style.position = "static";
Applies to
All the HTML elements.
Example
Here is the example −
<html>
<head>
<style type = "text/css">
img#lead {position: absolute;}
div.top {position: fixed; top: 0; height: 10% width: 100%;}
sup {position: relative; bottom: 0.66em;}
</style>
</head>
<body>
<img src = "/css/images/bullet.gif">
<div>Tutorialspoint.com</div>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>
It will produce the following result −