The CSS position property modifies the position of an element on an HTML page. top, right, left, and bottom properties define where an element is positioned relative to the edge of the box. The position CSS property has five values: static, fixed, relative, sticky, and absolute.
Positioning elements in the right place based on a specification is an important part of good web design.
That’s where the CSS position property comes in. The position property has five values that you can use to define how an element should be positioned on a web page.
This tutorial will discuss, with examples, how to use the position property to position an element on a web page. After reading this tutorial, you’ll be an expert at using the position property to position elements on a web page in CSS.
CSS Position
The position property allows you to define the position of an element on a web page. The syntax for the position property is as follows:
position: positionType;
There are a number of situations where the position property can be useful. You may decide you want it to design a navigation bar that is fixed at the bottom of the page, for instance.
There are five values that you can use to set the position of an element on a web page:
- static
- fixed
- relative
- sticky
- absolute
Using one of the five values above, you can specify how an element should be positioned. You can use the top, bottom, left, and right properties to further define the element’s position on the page. We’ll discuss how this works in our examples for this article.
CSS Position Values
We can start to explore how to use each of the potential values of the position property. Let’s walk through an example of each of the values you can use with the position property.
Static Position
HTML elements are positioned as static by default. This means that an element is not affected by the top, bottom, left, and right CSS properties. Browsers automatically render elements in the static position unless the code indicates otherwise.
For instance, suppose we are designing a box that contains some text. If we want to position the contents of this box using default positions, we can use this code:
<html>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
position: static;
border: 2px solid lightblue;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
We created a box that is positioned statically on the page. In other words, the box is not positioned in any particular way; rather, its position is based on browser defaults. Our box has a 2px-wide solid light blue border. This border makes the box more visible.
Fixed Position
The fixed value positions an element at a particular place on a web page.
When you use the fixed value, the element that is fixed will always stay in the same place. The element will stay fixed even if the user scrolls down the web page. This is because the element is removed from the normal web page view. To position an element using the fixed value property, you must use the top, right, bottom, and left properties.
We want to create a box and fix it to the bottom right corner of a web page. We can do so using the following code:
<html>
<p>This is the contents of a web page.</p>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
width: 200px;
border: 2px solid lightblue;
position: fixed;
bottom: 0;
right: 0;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In this example, we used the fixed position value to create a box that is fixed to a specific position on the web page. The bottom: 0 and right: 0 properties position the box at the bottom right-hand corner of the web page.
We specified that the width of our box should be 200px. Our box should have a 2px solid light blue border. These styles make our box easily visible.
As you can see in the image above, our box is positioned in the bottom right-hand corner of our web page. When the user scrolls down, the box will retain its position on the screen. This means that the user will continue to see the box at the bottom right of their screen, even when they scroll.
Relative Position
The relative value positions an element relative to its default position.
The relative value is used in addition to a top, bottom, left, or right property. Those four properties specify how an element will be offset from its default position. The space created by a relatively positioned box will not be filled by another element.
For instance, if you wanted to position an element relative to a 50px left border, you would specify a value for the left property. Here’s the code we would use to create such a box:
<html>
<p>This is the contents of a web page.</p>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
position: relative;
left: 50px;
border: 2px solid lightblue;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In this example, we defined a box with relative positioning. We used the left property to offset our box to the left by 50px. As you can see, there is a 50px gap between the start of our page and the start of our box. We created this using the position: relative and left: 50px properties.
The space created to the left of our box will not be filled by any other element.
Sticky Position
The sticky position value positions an element relatively until a visitor crosses a threshold. Then, the element has a fixed position.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
The sticky position is essentially a mix of the relative and fixed positions. When a sticky element loads, it is relatively positioned. The element stays bound to a fixed position after the user scrolls down past a certain point on the page.
Using a sticky position is useful if you want to preserve the flow of a document. You can make elements stick to a particular position so a visitor does not lose sight of that element.
The sticky position is commonly used with navigation bars that stick to the top of the screen when the user scrolls down the page.
We want a box to appear at the top of our page. This box should appear after some text and then stick to the top when the user scrolls down to the image. We could use the following code to accomplish this task:
<html>
<p>Lorem ipsum dolor sit amet, … </p>
<div>
<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>
<style>
.inner {
position: sticky;
top: 0;
border: 2px solid lightblue;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In this image, you can see that the box appears after our first paragraph of text. This is because the user has not yet scrolled down and met the box. This is what happens when our user scrolls down past the box:
At the top of our page, we have a paragraph of Lorem ipsum … standard text. We fixed a box containing the text This is a positioned box beneath this paragraph. Additionally, when the user scrolls down to the positioned box that we declared, the box is bound to the top of the screen. As the user keeps scrolling, the box will stay at the top of their screen.
The box will return to its initial position between the two paragraphs of text. This will only happen when a user scrolls above the box.
Absolute Position
The absolute value positions an element relative to another, already-positioned element.
The absolute property positions an element relative to another, already-positioned element. For instance, an absolute positioned element may be the text inside a box that includes a paragraph of text. This box could have a relative or fixed position.
We are designing a box that we want to appear at the bottom left-hand corner of another box. We can create these boxes using the following code:
<html>
<div class="outer">
<p>This is the outer box.</p>
<p class="inner">This is a positioned box.</p>
</div>
<style>
.outer {
position: relative;
border: 2px solid lightblue;
width: 300px;
height: 300px;
}
.inner {
position: absolute;
left: 0;
bottom: 0;
border: 2px solid pink;
}Click the button in the code editor above to see the output of our HTML/CSS code.
In our HTML file, we define two boxes. We declare the first box using a <div> tag and assign it the class outer. This means the box will have the CSS styles associated with the outer class. We declare the second box using a <p> tag and assign it the class inner.
In our CSS file, we specify that our outer box should:
- Be positioned relative to other elements on the web page.
- Have a 2px-wide solid light blue border.
- Be 300px wide by 300px tall.
We specify that our inner box should:
- Be positioned absolutely.
- Be positioned at the bottom left of our outer box (using left: 0, bottom: 0).
- Have a 2px-wide solid pink border.
In this example we positioned the pink box (inner) at the bottom left of the outer box. If we were to use the fixed keyword, on the other hand, the pink box would be positioned at the bottom of our web page.
Conclusion
The CSS position property defines the position of an element on a web page. The top, right, bottom, and left properties place an element in a particular place on the web page. Now you’re ready to start positioning elements in CSS using the position property like a pro!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
