CSS - Positions

When the image is in the background, we will have content(texts, headings, etc.) in the foreground.

There are mainly two aspects here - the background image and the position of content concerning the background image.

We will understand the position property first to ensure we are on the same page.

Understanding Position Property:

Position: Where to place the elements on the webpage?

For demonstration, paste this code on your HTML file.

    <div class="outer-container">
        <div class="inner-container">
            <div class="box absolute">
                <p>Absolute</p>
            </div>
            <div class="box relative">
                <p>Relative</p>
            </div>
            <div class="box fixed">
                <p>Fixed</p>
            </div>
        </div>
    </div>

Add this to your CSS file.

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.outer-container {
    border: 3px dashed black;
    width: 75vw;
    height: 85vh;
    margin: 40px auto;
}

.inner-container {
    border: 2px dashed blue;
    width: 40vw;
    height: 50vh;
    margin: 200px auto;
}

.box {
    width: 150px;
    height:150px;
    color:white;
    padding:1rem;
}

CSS has four crucial position values - Static, Absolute, Relative, Fixed, and Static.

Position - Static and Absolute:

Whatever you have done in CSS without position property - by default, it is static positioning.

So when you give position static, nothing will change. It goes with webpage flow.

Let's dig into the absolute position.

Add this CSS,

.absolute {
    background-color: blue;
    position: absolute;
}

Then change,

.absolute {
    background-color: blue;
    position: static;
}

Did you notice any difference?

No, right?

Then why two position values, and what is the difference between them?

It is the add-on property that makes the difference.

Add-ons are top, right, bottom, and left.

Paste this code,

.absolute {
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
}

You will get this,

Paste this code,

.absolute {
    background-color: blue;
    position: static;
    top: 0;
    left: 0;
}

You will be back to normal flow.

Why it goes to the top left corner when the position is absolute?

• Absolute positioning allows an element to be positioned relative to its closest-positioned ancestor(relative, absolute, fixed, or sticky).

• Also, note ancestor position should not be static because it implies the normal page flow.

• If there is no such ancestor, it goes relative to the viewport(browser window).

Let's play with it

Add this code,

.outer-container {
    border: 3px dashed black;
    width: 75vw;
    height: 85vh;
    margin: 40px auto;
    position: relative;
}

What if it is more than one ancestor?

Paste this code,

.outer-container {
    border: 3px dashed black;
    width: 75vw;
    height: 85vh;
    margin: 40px auto;
    position: relative;
}

.inner-container {
    border: 2px dashed blue;
    width: 40vw;
    height: 50vh;
    margin: 200px auto;
    position: relative;
}

Absolute picks up the closest ancestor.

Position - Relative:

This is the same as absolute, except it defaults to the closest parent no matter parent has position property or not.

Paste this code,

.outer-container {
    border: 3px dashed black;
    width: 75vw;
    height: 85vh;
    margin: 40px auto;
}

.inner-container {
    border: 2px dashed blue;
    width: 40vw;
    height: 50vh;
    margin: 200px auto;
}
.relative {
    background-color: red;
    position: relative;
}

Position - Fixed:

Fixed -> No matter if you scroll, its position is fixed.

Let us demonstrate,

Paste this code,

.fixed {
    background-color: green;
    position: fixed;
}

It will be placed at normal page flow(i.e., its original position).

When scrolled,

When you give add-on properties like the top, right,etc

Paste this code,

.fixed {
    background-color: green;
    position: fixed;
    top:100px;
    right: 100px;
}

This is important,

When you specify values for the top, right, bottom, and left properties on a position: fixed element, the element is moved from its original position by the specified amount in the specified direction relative to the viewport.

Position - Sticky:

It is a mix between relative and fixed.

It will be at normal page flow.

When scrolled down, it will be fixed.

The critical thing to remember here is position: sticky is based on the parent element.

For demonstration purposes,

I have this code,

    <div class="outer-container">
        <div class="box sticky">
            <p>Sticky</p>
        </div>
    </div>

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    min-height: 200vh;
}

.outer-container {
    border: 3px dashed black;
    width: 75vw;
    height: 85vh;
    margin: 40px auto;
}

.box {
    width: 100px;
    height:100px;
    color:white;
    padding:1rem;
}

.sticky {
    background-color: black;
    position: sticky;
    top:0;
}

See the output,

Points to note:

• The fixed aspect is between the boundaries of the parent edges(top and bottom).

• The parent element should have height.

• Where does the fixed aspect start, and how do we control it? by using the top property.

• top --> length between viewport top edge(browser window top) and sticky element top edge.

• fixed aspect ends at the parent's bottom edge.

Let's change the top and see,

Paste this code,

.sticky {
    background-color: black;
    position: sticky;
    top:75px;
}

Note: top --> window top to sticky element top.

I hope you find this article helpful.