What are the five possible values of the CSS position property?

Answer: The CSS position property can have five main values: static, fixed, relative, sticky, and absolute.

In CSS, what is an element's default position?

Answer: The default positioning of every element in CSS is static.

CSS Position

Introduction

Are you bored with static web pages? Cascading Style Sheets (CSS) Position will liven up your website. You may take control of the style and arrangement of your Hypertext Markup Language (HTML) components with only a few lines of code and build dynamic, eye-catching designs that will capture the attention of your visitors.

Using CSS, Elements may be moved around the page, stacked on top of one other, or even fixed in place for a nice parallax effect. CSS Position is the tool you need to elevate your web design talents to the next level, whether you're a web developer trying to enhance your game or a designer looking to impress your clients. Let us understand the CSS position and start building stunning site layouts for the viewers!

CSS is responsible for the layout of a page and color, background images, typography, and much more. In this article, we'll be discussing CSS position property.

CSS Position Property

The CSS position property decided how an HTML element should be positioned. An element can have the following types of positioning. Let’s understand them one by one.

Static Positioning

The HTML elements are positioned static by default. The element with static positioning is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties remain unaffected.

Example: Let’s see an example below of static positioning.

HTML

<div class="box" id="one">Coding Ninjas</div>

<div class="box" id="two">Code Studio</div>

<div class="box" id="three">Guided Paths</div>

<div class="box" id="four">Courses</div>

CSS

* {

box-sizing: border-box;

}

.box {

font-weight: bold;

display: inline-block;

text-align: center;

width: 100px;

height: 100px;

background: #ffa500;

color: white;

}

#two {

top: 20px;

left: 20px;

background: #adff2f;

}

Result: The elements are positioned normally.

Relative Positioning

This positioning property sets the element relative to its normal position in the document. Relatively positioned elements are offset from their usual position inside the document by a specified amount, but the offset has no impact on other elements.

Let’s see how relative positioning works.

Example: In the example below, the box named Codestudio has a relative position.

HTML

<div class="box" id="one">Coding Ninjas</div>

<div class="box" id="two">Code Studio</div>

<div class="box" id="three">Guided Paths</div>

<div class="box" id="four">Courses</div>

CSS

* {

box-sizing: border-box;

}

.box {

font-weight: bold;

display: inline-block;

width: 100px;

height: 100px;

background: #ffa500;

color: white;

}

#two {

position: relative;

top: 20px;

left: 20px;

background: #adff2f;

}

Result: Notice how the other elements are placed as if "Code Studio" were taking up the space of its normal position.

Now, let’s move on to the next positioning property.

Absolute Positioning

Absolute positioning is used to place an element with respect to the initial parent element with a non-static position. If no such parent exists, it is positioned relative to the initial containing block(HTML).

The document's normal flow is maintained by elements that are relatively positioned. An element that is absolutely positioned, on the other hand, is removed from the flow.

Syntax

.positioned {

position: absolute;

top: 45px;

left: 30px;

}

Example: Below is the code snippet of HTML and CSS code showing absolute positioning.

HTML

<h1>Coding Ninjas | CodeStudio</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 | Get your doubts resolved instantly with live 1:1 mentor support | CodeStudio - A platform to help you practice, compete & get ready for interviews.</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 IITs. They have valuable teaching experience and extensive knowledge they share with students to guide them in becoming great programmers or developers."</p>

CSS

* {

box-sizing: border-box;

}

body {

width: 500px;

margin: 0 auto;

}

p {

background: yellow;

border: 3px solid blue;

padding: 10px;

margin: 10px;

}

span {

background: red;

border: 1px solid black;

}

.positioned {

position: absolute;

background: orange;

top: 45px;

left: 30px;

}

Result: The paragraph element with 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 in the positioning of 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

<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.

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 Codeforces, Topcoder, Hackerrank, HackerEarth Options available to start from DS& algo.

Requires foundation coding knowledge

</p>

</div>

CSS

* {

box-sizing: border-box;

}

.box {

width: 100px;

height: 100px;

background: red;

color: white;

}

#one {

position: fixed;

text-align:center;

top: 80px;

left: 10px;

background: orange;

}

.outer {

width: 500px;

height: 300px;

overflow: scroll;

padding-left: 150px;

}

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 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.

HTML:

<div class = "outer">

<dl>

<div>

<dt>Coding Ninjas</dt>

<dd>Courses</dd>

<dd>Community</dd>

<dd>Resources</dd>

<dd>Blogs</dd>

<dd>Placement Preps</dd>

</div>

<div>

<dt>Code Studio</dt>

<dd>Code Problems</dd>

<dd>Interview Experiences</dd>

<dd>Guided Paths</dd>

<dd>Mock Tests</dd>

<dd>Resources</dd>

</div>

<div>

<dt>Carrer Camp</dt>

<dd>Professionals and Freshers</dd>

</div>

<div>

<dt>Placements</dt>

<dd>Guided Programs</dd>

<dd>Doubt Resolution</dd>

<dd>Mock Interview</dd>

</div>

</dl>

</div>

CSS:

* {

box-sizing: border-box;

}

dl > div {

background: #FFF;

padding: 24px 0 0 0;

}

.outer {

width: 500px;

height: 300px;

overflow: scroll;

}

dt {

background: orange;

border-bottom: 1px solid #989EA4;

border-top: 1px solid #717D85;

color: #FFF;

font: bold 18px/21px Helvetica, Arial, sans-serif;

margin: 0;

padding: 2px 0 0 12px;

position: -webkit-sticky;

position: sticky;

top: -1px;

}

dd {

font: bold 20px/45px Helvetica, Arial, sans-serif;

margin: 0;

padding: 0 0 0 12px;

white-space: nowrap;

}

dd + dd {

border-top: 1px solid #CCC;

}

Output:

Image 1: Initially, without scrolling.

Image 2: Coding Ninjas is stick 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: Carrer Camp is stick at the top now.

Now, let’s see the z-index property.

Overlapping elements: The z-index Property

When elements are placed, they may overlap with others. The z-index attribute determines which element should be placed in front of or behind the others in the stack order.

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;

z-index: -1; /* Negative values to lower the priority */

/* 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:

HTML

<div class="wrapper">

<div class="dashed-box">Coding Ninjas</div>

<div class="gold-box">CodeStudio</div>

<div class="green-box">Resources</div>

</div>

CSS

.wrapper {

position: relative;

}

.dashed-box {

position: relative;

z-index: 1;

border: dashed;

height: 10em;

margin-bottom: 1em;

margin-top: 2em;

font-size: 20px;

font-weight: bold;

}

.gold-box {

position: absolute;

z-index: 3; /* put .gold-box above .green-box and .dashed-box */

background: gold;

height: 3em;

width: 80%;

left: 60px;

top: 3em;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.green-box {

position: absolute;

z-index: 2; /* put .green-box above .dashed-box */

background: lightgreen;

width: 20%;

left: 40%;

top: -15px;

height: 8em;

opacity: 0.9;

font-size: 20px;

text-align: center;

font-weight: bold;

}

Result: The "Coding Ninjas" box has a z-index of 1, the "Resources" box has a z-index of 2, and the "CodeStudio" box has a z-index of 3.

Frequently asked questions

What are the five possible values of the CSS position property?
Answer: The CSS position property can have five main values: static, fixed, relative, sticky, and absolute.
In CSS, what is an element's default position?
Answer: The default positioning of every element in CSS is static.

Key Takeaways

In this article, we saw a critical CSS concept known as position property. These properties have unique characteristics.

You can also check out some important CSS concepts such as Introduction to CSS, CSS Selectors, CSS Pseudo-elements and CSS Margins.

While preparing for front-end roles, we suggest you go through the CSS Interview Questions, including the most common conceptual questions asked in interviews.

Happy Learning!