CSS positioning

Allows to move from its normal position in the document modal.

Default position

Link to Github :Code



css

.box{
    width:100px;
    height:100px;
    margin-bottom: 10px;
 }
.blueBox{
    background: #627da0;
}
.greenBox{
    background:#5b8054;
}

html

<p>
    Default CSS Positioning
</p>
<div class="box blueBox"></div>
<div class="box greenBox"></div>

Output

Fixed position

Fixes a position of the element relative to the browser window.The element always remains fixed in place, even when scrolling

Link to GitHub :Code

• We would have only one value horizontally and vertically. We cannot have both. ex: we can have top / bottom and left /right
• Usually we apply fixed positioning for menu or navigation bar

Absolute position

Takes out of the document flow. The browser acts as if the browser has no width and height and the other element moves up as it were never there.The position of the element is then fixed relative to the top level container, or the closest parent with the set position.

Note: It is similar to fixed position

Absolute relative to the top

When we apply top to the div with absolute it would consider relative distance to the browser window

 .container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid;
     margin-top:100px;
    
}
.blueBoxFixed{
    background: #627da0;
    position:absolute;
    top:100px;
    left:150px;
}

Output

Note: Div by default would not have a height

Absolute relative to the container

When both the div and the container are absolute the div would consider its position relative to the container and not relative to the browser window

Link to Github: Code

.container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid;
     margin-top:100px;
     margin-left:500px;
     position:absolute;
}

.blueBoxAbsolute{
    background: red;
    position:absolute;
    top:50px;
    left:50px;
 }

Output

Relative position

Sets the element relative to its original position. The elements original width and height is retained in the document flow and other elements behave as if its original position

Note:If we specify bottom relative to the browser it would still retain its original state

css

.blueBoxRelative{
    background: #627da0;
    position:relative;
    bottom:0px;
    left:0px;
}

html

 <div class="box blueBoxRelative">
    <strong>Relative</strong>
    </div>

output

When we use relative with absolute it would stick to his parent container

css

.containerRelative{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid;
     margin-top:200px;
     margin-left:150px;
     position:absolute;
     
}
.blueBoxRelative{
    background: #627da0;
    position:relative;
    top:0px;
    left:0px;
}

html

<div class="containerRelative">
    <div class="box blueBoxRelative">
    <strong>Relative</strong>
    </div>
    Relative Positioning
</div>

Output

Static positioning

It is the default behavior of the elements in the DOM.

Inherit positioning

Tells an element to inherit its positioning from its parent element