CSS Position

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.

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:

CSS Position eg1

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:

CSS Position eg2

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:

CSS Position eg3

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:

eg4

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:

eg5

Follow Us On