Updated June 17, 2023
Definition of CSS Position
The CSS Position property defines the positioning of a specific element on a web page. This article’s main importance is showing how to control the position part and display of the content. Doing Positioning with the old CSS version is quite complicated. Therefore, a new standard CSS flexible Layout has more recent versions. Coming to the positioning and layout model is difficult as they have to cope with browser implementation issues. This positioning property has five methods: static, relative, absolute, sticky, and fixed.
Syntax Relative:
Position:relative;
Top:10px;
Right:25px;By default, you can move the relatively positioned element along with the initial element or position it usually. You can calibrate the box position about the normal flow using the left, right, top, or bottom properties.
Syntax Absolute:
Position:absolute;
Top:12px;
Right:23px;This action is based on the parent element, positioning the element precisely at the specified location.
Syntax Static:
Position:static;
display:inline;
Display:inline-block
float:left;
clear:both;
overflow:hidden;How Does CSS Position Work?
This property aids in calculating the layout and content specified on websites.
There are four sets of properties for positioning:
- Property 1: Left, Right, Top, Bottom (This implies the distance of an element from the edge corner of the viewport).
- Property 2: The positioning concepts.
- Property 3: Z-Index.
- Property 4: Formatting style.
Here are some CSS positions, along with a brief explanation of how they work:
1. Static
Static-positioned elements are set as the default and have no impact on right, left, bottom, or top properties. They don’t have any special direction. It was made positioned on the normal Page.
2. Relative
It is helpful while creating a CSS layout, and it finds quite difficult. An HTML element with this property works the same as a static, and they differed by setting the right and left values to the ancestor element.
3. Fixed
Fixed positions are similar to absolute positioning, but they break away from the normal flow of the text and remain fixed at a specific point on the web page. All other HTML elements behave as if the fixed position element does not exist on the page. The key difference between absolute positioning and fixed positioning is a fixed position will retain its space on the ongoing page when there happens to have some page Scroll.
4. Absolute
In this position, an element places itself with respect to itself and excludes itself from the document’s normal flow. Generally, they position themselves in the top-left of their ancestor or parent element.
5. Z-Index
A scenario arises where the elements on the web page overlap in the normal flow. The Z-index property is used to position those elements on the top or bottom. In layman’s words, it determines the stacking order of an element or might be referred to as a three-dimensional viewport. The positive margin indicates that an element should be pushed to the top, whereas the negative margin indicates that it should be pushed to the bottom. And the Z-index does not work well with static positioning concepts.
Examples to Implement CSS Position
Here are different examples of CSS positions:
Examples #1: Using Static Position
This is the example of CSS static position as follows.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Static Positioning</title>
<style>
.box{
color: #fff;
background: #73AD21;
padding: 5px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px dotted;
font-family: Arial, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Static Positioned Box example</h2>
</div>
<p> HTML along with CSS makes websites beautiful </p> </div>
</body>
</html>Output:
Examples #2: Using Relative Positioning
This is the example of the CSS relative position as follows.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Relative Positioning</title>
<style>
.box{
position: relative;
left: 50px;
color: #fff;
background: yellow;
padding: 15px;
}
.container{
padding: 45px;
margin: 45px;
border: 4px solid black;
font-family: italic, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Box</h2>
</div>
<p> Hello Folks.</p>
</div>
</body>
</html>Below Output creates a CSS border and notes that an element can be moved in a layout.
Output:
Examples #3: Using Fixed Positioning
This example demonstrates the CSS fixed position.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Fixed Positioning</title>
<style>
.box{
position: fixed;
top: 100px;
left: 150px;
color: #cce;
width: 50%;
background: #efefef;
padding: 20px;
}
.container{
padding:40px;
margin: 40px;
position: relative;
border: 4px solid black;
font-family: calibri, sans-serif;
}
.container p{
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned demo</h2>
<div><strong>Note:</strong> The position of this box is fixed relative to the document's viewport. It doesn't scroll with the page.</div>
</div>
<p> A new request has been posted according to the skills . And please decide to to apply for the course</p>
</div>
</body>
</html>Output:
Examples #4: Using Absolute Positioning
Here’s an example of using CSS’s absolute position:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Absolute</title>
<style>
.box-green {
position: absolute;
background: green;
width: 90px;
height: 95px;
left: 6px;
top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-green"></div>
<div class="box-blue"></div>
</div>
</body>
</html>The following output displays an element positioned at the beginning of its parent.
Output:
Examples #5: Demo Using all Three Positioning
This is an example of the CSS’s positions using relative, static, and absolute.
Code: ppp.html
<!DOCTYPE HTML>
<html>
<head>
<title> CSS Positioning Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="EDUCBA">
<h1> <c>Position demo <c></h1>
<section>
<h2>relative type</h2>
<div>Static part</div>
<div class="relative">Relat type</div>
<div>Static box</div>
</section>
<section>
<h2>absolute</h2>
<div>Static test</div>
<div class="absolute">Absolute class</div>
<div>Static</div>
</section>
<section>
<h2>fixed Demo</h2>
<div>Static</div>
<div class="fixed">Fixed test</div>
<div>Static</div>
</section>
</body>
</html>Code: new.css
body {
border: 2px solid black;
}
section {
border: 1px solid black;
margin: 1rem;
position: relative;
}
div {
background: linear-gradient(to bottom, blue, white);
border: 2px dashed black;
height: 26px;
margin: inherit;
width: 80px;
top: 81px;
left: 71px;
}
.relative {
background: linear-gradient (50deg, black, white);
position: relative;
}
.absolute {
background: red;
position: absolute;
}
.fixed {
background: yellow;
position: fixed;
}Output:
Conclusion
Therefore, we have seen how to use CSS to specify the position of an element. Anyone can learn these concepts with a basic knowledge of HTML and CSS. Generally speaking, HTML elements are visible, like the direct order structure, to disturb the normal flow or overlap the elements for a better page Layout; CSS can be used.
Recommended Articles
We hope that this EDUCBA information on “CSS Position” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
