Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
CSS Position Property
2.1.
Formal Definition
2.2.
Static Positioning
2.3.
Relative Positioning
2.4.
Absolute Positioning
2.5.
Fixed Positioning
2.6.
Sticky Positioning
2.7.
Overlapping Elements with z Index Property
3.
Position Properties
4.
 
5.
 
6.
 
7.
 
8.
Frequently Asked Questions
8.1.
What are the CSS position property's five potential values?
8.2.
What is the default position of an element in CSS?
8.3.
What is the purpose of the "z-index" property?
8.4.
In CSS, how does the "clear" property work?
8.5.
Can you use percentages in CSS for the "top," "bottom," "left," and "right" properties?
8.6.
In CSS, what is the "position" attribute used for?
9.
Conclusion
Last Updated: Mar 27, 2024
Medium

CSS Position

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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 Position

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.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Coding Ninjas</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    
    <body>
        <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>
    </body>
</html>


CSS

* {
    box-sizing: border-box;
}

.box {
    padding-top: 20px;
    font-size: 30px;
    font-weight: bolder;
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 200px;
    background: #00fffb;
    color: #000000;
}

#two {
    top: 20px;
    left: 20px;
    background: #ff2f55;
}


Output

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.

HTML

<body>  
    <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>
</body>


CSS

* {
    box-sizing: border-box;
}

.box {
    padding-top: 20px;
    font-size: 30px;
    font-weight: bolder;
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 200px;
    background: #00fffb;
    color: #000000;
}

#two {
    position: relative;
    top: 20px;
    left: 20px;
    background: #ff2f55;
}


Output:

Relative Positioning

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.

Syntax

.positioned {
    position: absolute;
    top: 45px;
    left: 30px;
}


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>


CSS

* {
    box-sizing: border-box;
}

body {
    width: 500px;
    margin: 0 auto;
}

p {
    background: rgb(126, 225, 255);
    border: 3px solid rgb(0, 0, 0);
    padding: 10px;
    margin: 10px;
}

.positioned {
    font-size: larger;
    color: white;
    position: absolute;
    background: rgb(0, 0, 0);
    top: 45px;
    left: 30px;
}


Output:

Absolute Positioning

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>


CSS

* {
    box-sizing: border-box;
}

.box {
    padding-top: 40px;
    font-size: 20px;
    font-weight: bold;
    width: 120px;
    height: 120px;
    color: white;
}

#one {
    position: fixed;
    text-align:center;
    top: 90px;
    left: 10px;
    background: #083c3b;
}

.outer {
    width: 800px;
    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 

Fixed Positioning

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.

Fixed Positioning

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

<body>
     <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>Career 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>      
 </body>


CSS

* {
    box-sizing: border-box;
}

dl > div {
    background: #FFF;
    padding: 24px 0 0 0;
}

.outer {
    width: 800px;
    height: 300px;
    overflow: scroll;
}

dt {
    background: #144e4d;
    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.

Sticky Positioning

Image 2: Coding Ninjas is stuck at the top after scrolling.

Sticky Positioning

Image 3: After all the elements of Coding Ninjas are complete. Code Studio is stick at the top now.

Sticky Positioning

Image 4: Career Camp is stuck at the top now.

Sticky Positioning

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:

HTML

<body>
    <div class="wrapper">
        <div class="dashed-box">Coding Ninjas</div>
        <div class="black-box">Coding Ninjas Studio</div>
        <div class="blue-box">Resources</div>
    </div>
</body>


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;
}

.black-box {
    position: absolute;
    /* put .black-box above .blue-box and .dashed-box */
    z-index: 3;
    color: white;
    background: black;
    height: 3em;
    width: 80%;
    left: 60px;
    top: 3em;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.blue-box{
    position: absolute;
    /* put .blue-box above .dashed-box */
    z-index: 2;
    background: #00fffb;
    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 "Coding Ninjas Studio" box has a z-index of 3.

Overlapping elements

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Position Properties

These are the properties we use in addition to “CSS position” to align our images as required.

Property About
right The right margin edge of a positioned box is set.
position The kind of placement for an element is specified.
left The left margin edge of a positioned box is set.
clip Clips a piece that is perfectly positioned.
bottom The bottom margin boundary of a positioned box is set.
top The upper margin edge of a positioned box is set.

 

 

 

 

 

 

Check this out:  Versions of CSS

Frequently Asked Questions

What are the CSS position property's five potential values?

CSS position can have five different values: static, relative, fixed, sticky, and absolute.

What is the default position of an element in CSS?

Every element's default placement in CSS is static.

What is the purpose of the "z-index" property?

The stack order of positioned items is specified using the "z-index" attribute.

In CSS, how does the "clear" property work?

The "clear" attribute indicates which sides of an element cannot have floating items.

Can you use percentages in CSS for the "top," "bottom," "left," and "right" properties?

Yes, you may use percentages to place an element relative to its containing block.

In CSS, what is the "position" attribute used for?

The "position" attribute of an element describes the type of positioning mechanism utilized.

Conclusion

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

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

For front-end preparation, you may refer to the following resources-

  1. CSS Interview Questions
  2. CSS Margins
  3. CSS-Selectors
     

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

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 problemsinterview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning, Ninjas!

Previous article
Difference Between Margin and Padding
Next article
Add External CSS In HTML
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass