Introduction to CSS Position
CSS Position defines how a certain element should be positioned on a web page. The main importance of this article is to show how to control the position part and display of the content. Doing Positioning with CSS old version is quite complicated therefore a new standard CSS flexible Layout has newer versions. Coming to the positioning and layout model it is quite a difficult part as they have to cope with the browser implementation issues. This positioning property has five different methods namely static, relative, absolute, sticky, fixed.
Syntax Relative:
Position:relative;
Top:10px;
Right:25px;By default relative positioned element can be moved around with the initial element or we can say it is done in a normal position. The box position is calibrated to the normal flow later it can be used as left, right, top, bottom property.
Syntax Absolute:
Position:absolute;
Top:12px;
Right:23px;This act according to the parent element. It is positioned exactly 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 helps to calculate the layout and content specified in the websites.
There are three sets of properties done in 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.
Given below are some of the CSS positions with their working:
1. Static
Static position elements are set by default and they have no impact on the properties like right, left, bottom, top. They don’t have any special direction it was made positioned with respect to the normal Page.
2. Relative
It is helpful while creating CSS layout and it finds quite difficult. An HTML element with this property works the same as static and they differed by setting the right, left values to the ancestor element.
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
3. Fixed
Fixed positions are exactly similar to absolute positioning, but they are violated from the normal flow of the text and made fixed in an exact point on the web page and all other elements of HTML behave as it doesn’t exist on the page. The key difference between absolute positioning and fixed positioning is a fixed position will retain their space on the ongoing page when there happened to have some page Scroll.
4. Absolute
In this position, an element is placed with respect to themselves and it is excluded from the normal flow of the document. In general, they are placed in the top-left of their ancestor or parent element.
5. Z-Index
There occurs a scenario where the elements in the web page get overlapped in the normal flow, to determine the exact positioning of those elements on the top or bottom Z- index is used. In layman terms, it sets the stacking order of an element or can be termed as a three-dimension viewport. The positive margin specifies an element should be pushed to the top and the negative margin implies to the bottom. And Z-index doesn’t make well with static positioning principles.
Examples to Implement CSS Position
Below are the 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 makes a border created in CSS and notes that an element can be moved in a layout.
Output:
Examples #3: Using Fixed Positioning
This is the example of the CSS fixed position as follows.
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
This is the example of the CSS’s absolute position as follows.
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>Below output displays an element at the beginning of its parent.
Output:
Examples #5: Demo Using all Three Positioning
This is the example of the CSS’s positions that is by using relative, static and absolute as follows.
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 the basic knowledge of HTML and CSS. Generally speaking, HTML elements are visible like the direct order structure, in order to disturb the normal flow or overlap the elements for making better page Layout CSS can be used.
Recommended Articles
This is a guide to CSS Position. Here we discuss the basic concept, syntax, working, and examples of CSS position with code implementation. You can also go through our other suggested articles to learn more –
