Home »
CSS
Positioning elements (The position property) in CSS
CSS | position property: Here, we are going to learn about the position property in CSS, we will learn how to position the elements in HTML using CSS?
Submitted by Anjali Singh, on November 29, 2019
CSS | position property
Abstract Idea:
Positioning, a very important tool in CSS to style and to make a webpage presentable nonetheless comprehensive. While making a webpage various entities are to be positioned so that a user can have a clear idea about the webpage and its content.
Therefore positioning must be done very carefully. One element here and other, the webpage would start looking dull.
position property
position is a property of CSS to position elements on a webpage. The positioning can be done with respect to the parent element or relative element.
There are mainly 5 types of position properties in CSS namely,
- fixed
- static
- relative
- absolute
- sticky
The position can be done with the help of top, right, bottom and left property. They are used to designate the distance of an HTML element from the edge of the viewport. To position the element by making use of these four properties, first, we have to declare the positioning method.
Now let's discuss each of the positioning property in detail,
1) position:fixed
The HTML element using the property position:fixed will be oriented related to the viewport. As the name suggests this property is used to fix the position of an element. Even if someone wishes to scroll down or up the page the element will not move from its position. We can set the positioning by using top, right, bottom and left.
Syntax:
Element {
position: fixed;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="fixed">fixed element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
Output
In the above example, the element fixed is positioned relative to the browser window.
2) position:static
position:static is a default property of the positioning. It means that if no attribute of the positioning is set like the top, right, bottom and left, then the property is set to static by default. When the property is set to static then top, right, left and bottom attributes have no control over that element. The element will be positioned according to the normal flow of the page.
Syntax:
Element {
position: static;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="static">static element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
Output
In the above example, the static element scrolls down with the other content.
3) position:relative
The position:relative property is used to set the element's position with respect to the elements at the top of it. That means relative positioning. If we set the elements' attributes as the top, left and right , then the gap left by this element will not be filled by any other element.
Syntax:
Element {
position: relative;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.rel {
position: relative;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="rel">relative element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
Output
In the above example, the element is relative to its normal position.
4) position:absolute
The position:absolute property is used to set the position of an element with respect to its parent. If we use the absolute property then the positioning of the element will not depend on its siblings or other relative element.
Syntax:
Element {
position: absolute;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.abs {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="abs">absolute element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
Output
In the above example, the element is positioned relative to its first position.
5) position:sticky
The elements using the property position:sticky and top:0 will play a role between fixed and relative. That means if a user wants to scroll up the page then the element with the sticky property will also start moving until it touches the top. Now when the element reaches the top it will remain fixed there in spite of any further scrolling. We can also use the bottom property to stick the element at the bottom of the page.
Syntax:
Element {
position: sticky;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="sticky">sticky element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
Output
In the above example, even if we scroll down the page the sticky element position is fixed.
CSS Tutorial & Examples »