position
CSS position Property
The position property specifies the position of the element in a document.
This property has the following values:
static
fixed
absolute
relative
sticky
Types of Positioning
Types of Positioning
Positioned elements - when an element is positioned, its position on the page is determined using the offset properties: top, right, bottom, and left. Offset properties do not work on static elements.
Relatively positioned elements - position value is “relative”. The top and bottom properties specify the vertical offset from its normal position, the left and right properties specify the horizontal offset.
Absolutely positioned elements - position value is “absolute” or “fixed”. The top, right, bottom and left properties specify offsets from the edges of the element’s containing block.
Stickily positioned elements - position value is “sticky”. It is treated as a mix of “relative” and “fixed” elements.
| 类目 | 类目 |
|---|---|
| Initial Value | static |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.position = “sticky”; |
Syntax
Syntax
position: static | absolute | fixed | relative | sticky | initial | inherit;
Example of the position property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
position: absolute;
left: 40px;
top: 120px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
Result
Example of the position property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#box1 {
position: static;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box2 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box3 {
position: relative;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box4 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box5 {
position: absolute;
border: 2px solid #666;
width: 320px;
height: 100px;
top: 750px;
right: 25px;
}
#box6 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box7 {
position: fixed;
border: 2px solid #8ebf42;
background-color: #eee;
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#box8 {
position: absolute;
border: 2px solid #666;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<h3>Position: static</h3>
<p>
The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
</p>
<div id="box1">
Box1: position: static.
<div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: relative</h3>
<p>
The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
</p>
<div id="box3">
Box3: position: relative.
<div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: absolute</h3>
<p>
The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
</p>
<div id="box5">
Box5: position: absolute, top: 750px, right: 15px.
<div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: fixed</h3>
<p>
The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
</p>
<div id="box7">
Box7: position: fixed, bottom: 0, left: 0, right: 0.
<div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
</div>
</body>
</html>
In the given example, we include all the values to show the differences:
Example of the position property with the “sticky” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
height: 150px;
overflow: auto;
position: relative;
background-color: #cccccc;
padding: 0;
}
ul li {
list-style-type: none;
height: 30px;
padding: 10px 10px 0;
}
ul li:first-child {
position: -webkit-sticky;
position: sticky;
top: 1px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Example of the position property with the "sticky" value:</h2>
<ul>
<li>Sticky List Item</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
</ul>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| static | Elements are placed according to the normal flow of the document. This is the default value of this property. | Play it » |
| absolute | Elements are removed from the document flow and are positioned relative to its positioned ancestor element. | Play it » |
| fixed | Elements are removed from the document flow and are positioned relative to the browser window. | Play it » |
| relative | Element are placed relative to its normal position. | Play it » |
| sticky | Elements are positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block. | |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |