Do you think IIT Guwahati certified course can help you in your career?
Introduction
Are you bored with static web pages? Cascading Style Sheets (CSS) Position will liven up your website. With only a few lines of code, you can take control of the style and organization of your Hypertext Markup Language (HTML) components and create dynamic, eye-catching designs that will captivate the attention of your visitors.
CSS is responsible for the layout of a page and color, background images, typography, and much more. In this article, we will be discussing CSS position property.
CSS Position Property
The CSS position property determines where an HTML element should be placed. The following placement options are available for elements.
Static Positioning
Relative Positioning
Absolute Positioning
Fixed Positioning
Sticky Positioning
Formal Definition
The CSS position property specifies how an element will be placed on a page or document. While Implementing CSS position property, these are the parameters we’ll encounter.
Initial Value
Static
Applies to
All elements
Inherited
No
Computed Value
As specified
Animation type
Discrete
Creates stacking context
Yes
Value
Static, Absolute, Relative, Fixed, or Sticky
Let’s understand the types of positioning one by one.
Static Positioning
By default, HTML components are placed in a 'static' position. The element with static placement is positioned in accordance with the document's usual flow. The attributes top, right, bottom, left, and z-index are unchanged.
Example: Let’s see an example below of static positioning.
Result: This code generates a webpage with four text-filled boxes. HTML defines the structure, while CSS defines the style. The boxes are 100 pixels wide and 100 pixels tall, with a yellow backdrop and black lettering. The second box has a red backdrop and is positioned 20 pixels from the top and left. Searching for the position parameter? "static" is the default placement of every item, but you may still indicate it if necessary.
Relative Positioning
This placement attribute sets the element's position relative to the document's usual position. Relatively positioned items are offset by a defined amount from their normal position inside the page, but the offset has no effect on other components.
Let’s see how relative positioning works.
Example: In the example below, the box named Coding Ninjas Studio has a relative position.
Result: The working of this code is exactly as above except for the positioning of the second box; it is positioned using CSS relative position, which displaced it from the place it should be. You can observe how the other elements are placed as if "Code Studio" were taking up the space of its normal position.
Let us now go to the next positioning property.
Absolute Positioning
Absolute positioning is used to place an element concerning the initial parent element in a non-static position.If there is no such parent, it is positioned relative to the first contained block (HTML).
The natural flow of the document is preserved by elements that are reasonably positioned. An element that is absolutely positioned, on the other hand, is removed from the flow.
Example: Below is the code snippet of HTML and CSS code showing absolute positioning.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding Ninjas</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Coding Ninjas | Coding Ninjas Studio</h1>
<p>A place for aspiring and experienced programmers to
prepare for tech interviews, practice problems, compete
in challenges, discuss and stay up to date with the
latest developments in the tech world.</p>
<p class="positioned">Coding Ninjas | India's highly rated
Ed-Tech Platform | Well Guided Program | 1:1 mentor
support</p>
<p>"Coding Ninjas is a place that trains passionate people
in various technologies. Our core programs are intensive,
immersive training that transforms people into
outstanding developers. The training is provided by
expert faculties who have graduated from esteemed
universities such as Stanford, IITs and NITs. They have
valuable teaching experience and extensive knowledge they
share with students to guide them in becoming great
programmers or developers."</p>
</body>
</html>
Result: The paragraph element with the class name as positioned is taken out of the flow, and the remaining elements are positioned as if this element didn't exist.
Fixed Positioning
The fixed positioning feature is used to position text on the browser. This fixed test is positioned concerning the browser window and will not move even if the window is scrolled.
This can be used to make a "floating" element that stays in place regardless of how far down the page is scrolled.
Syntax
#one {
position: fixed;
top: 80px;
left: 10px;
}
Example: Below is the code snippet of HTML and CSS code showing fixed positioning.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding Ninjas</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="outer">
<p>
<h2>Courses Offered By Coding Ninjas</h2>
<h3><strong>Data structures and algorithms</strong></h3>
Data structures and algorithms is all about organising
the information and finding the most efficient approach
to solve a problem. Learning these concepts will in turn
help you to improve your problem-solving skills and solve
any real-world problems using technology.
<h4><strong>DSA Live</strong></h4>
This is the course to pick if you are just getting into
coding and want to build a strong foundation. Enrol today
to learn data structures, problem solving and cracking
interviews.
<div class="box" id="one">Coding Ninjas</div>
<h3><strong>Competitive Programming</strong></h3>
Learn to write the most efficient programmes & get ready
to crack competitions on Coding Ninjas Studio, Codeforces,
Topcoder, Hackerrank, HackerEarth Options available to
start from DS & algo.
Requires foundation coding knowledge
</p>
</div>
</body>
</html>
Result: The box "Coding Ninjas" is fixed at 80 pixels from the top of the page and 10 pixels from the left in the example below. It remains in the same position relative to the viewport even after scrolling.
Figure 1
Figure 2 Now, we can observe in this figure, how the box containing “Coding Ninjas” remains still in it’s position while the content besides it scroll up.
After scrolling, the box remains fixed.
Sticky Positioning
Sticky position refers to how the user scrolls over the document. Sticky positioning is almost like a combination of relative and fixed positioning.
Depending on the scroll position, a sticky element switches between relative and fixed positions. It is relative until a specific offset position in the viewport is met, at which point it "sticks" in place, just like the fixed positioning.
Syntax
#Element_one { position: sticky; top: 10px; }
Example: Below is the code snippet of HTML and CSS code showing sticky positioning.
Image 2: Coding Ninjas is stuck at the top after scrolling.
Image 3: After all the elements of Coding Ninjas are complete. Code Studio is stick at the top now.
Image 4: Career Camp is stuck at the top now.
Now, let’s see the z-index property.
Overlapping Elements with z Index Property
When elements are placed, they may overlap with others. In such situations, the z-index attribute determines the positioning of the overlapping elements, that is which element should be in the front, and which one at the back.
Those with a smaller z-index are covered by elements having a bigger z-index.
Syntax
/*
Keyword value
*/
z-index: auto;
/*
<integer> values
*/
z-index: 0;
z-index: 3;
z-index: 289;
/*
Negative values to lower the priority
*/
z-index: -1;
/*
Global values
*/
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;
Let’s understand the z-index with the help of an example:
If you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundles for placement preparations.
However, you may consider our paid courses to give your career an edge over others!
133+ registered 
