Positioning elements in the right place as per requirement is important for a good looking website. That’s where the CSS position property can be a magic.

The position property has five values that you can use to define how an element should be positioned on a web page.

There are five values that you can use to set the position of an element on a web page:

static
fixed
relative
sticky
absolute

1.Static Position

HTML elements are positioned as static by default. Browsers automatically set elements in the static position unless the code comes to change it.

<html>

<div class="example">
    <p>This is a positioned box.</p>
</div>

<style>

.example{
    position: static;
    border: 2px solid lightblue;
}

2.Fixed Position

The fixed value positions an element at a particular place on a web page.

When you use the fixed value, the element that is fixed will always stay in the same place. The element will stay fixed even if the user scrolls down the web page. Fixed value property, needs to define the top, right, bottom, and left properties.

<html>

<div class="example">
    <p>This is a positioned box.</p>
</div>

<style>

.example{
    width: 200px;
    border: 2px solid lightblue;
    position: fixed;
    bottom: 0;
    right: 0;
}

3.Relative Position

The relative value positions an element relative to its default position.

The relative value is used in addition to a top, bottom, left, or right property. Those four properties specify how an element will be offset from its default position. The space created by a relatively positioned box will not be filled by another element.

For instance, if you wanted to position an element relative to a 50px left border, you would specify a value for the left property. Here’s the code we would use to create such a box:

<html>

<div class="example">
    <p>This is a positioned box.</p>
</div>

<style>

.example{
    position: relative;
    left: 50px;
    border: 2px solid lightblue;
}

4.Sticky Position

The sticky position value positions an element relatively until a visitor crosses a threshold. Then, the element has a fixed position. Using a sticky position is useful if you want to preserve the flow of a document. You can make elements stick to a particular position so a visitor does not lose sight of that element.

The sticky position is commonly used with navigation bars that stick to the top of the screen when the user scrolls down the page.

<html>

<div class="example">
    <p>This is a positioned box.</p>
</div>

<style>

.example{
    {
    position: sticky;
    top: 0;
    border: 2px solid lightblue;
}
}

5.Absolute Position

The absolute value positions an element relative to another, already-positioned element.

The absolute property positions an element relative to another, already-positioned element. For instance, an absolute positioned element may be the text inside a box that includes a paragraph of text. This box could have a relative or fixed position.

We are designing a box that we want to appear at the bottom left-hand corner of another box. We can create these boxes using the following code:

<html>

<div class="outer">
    <p>This is the outer box.</p>
    <p class="inner">This is a positioned box.</p>
</div>

<style>

.outer {
    position: relative;
    border: 2px solid lightblue;
    width: 300px;
    height: 300px;
}

.inner {
    position: absolute;
    left: 0;
    bottom: 0;
    border: 2px solid pink;
}

Codes Poetry