You are currently viewing CSS Position Property – Explained
  • Post category:CSS

CSS Position Property – Explained

CSS Position Property

  • Introduction
  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

Introduction

  Demonstrate of all five of the different CSS position attribute properties for the position. It was so confusing for so long so hopefully. This was make everything clear if you already know CSS hopefully you can learn a trick or two. Because your it can be tricky again even if you work a lot with CSS. CSS position property is used to positioning of HTML element in a HTML document. CSS position attribute accepts five different values they are static, relative, absolute, fixed & sticky. The important think is while using position property we take help of left, right, bottom , top and z-index properties to position an HTML element. I’m going to explain position property to you with this as an example : First create a parent div and create 3 children div for that parent.

<div class="parent">
Parent
<div class="child-one">One</div>
<div class="child-two">Two</div>
<div class="child-three">Three</div>
</div>

Static CSS position Attribute

   We know that the normal document flow HTML elements are displayed some left to right and top to down in the browser window. Inline level elements are displayed one below another and block level elements one below another. It is a default position in all elements in HTML. I add the position property to parent and I assign the value static. Save and see there are no changes in the program. So, It is enough if you use it only in the important place.

.parent{
position: static;
}

Relative

  It is used a position an HTML element relative to its normal position. If you want to move only one child div to the left, right, top or bottom of the three child DIVs in the same parent div, you must first use Relative CSS position attribute . I will use the position : relative property in child one division. After use the relative position you can move it wherever you want.

.child-one{
position: relative;
left: 20px;
}

Absolute

  It is used to position an HTML element relative to edges of it’s first positioned ancestor or relative to the edges of the browser’s viewport. The wide area of the bowser window is called as viewport. If you use the absolute status CSS position attribute, you can place the DIV wherever you want. I will use these position in child-two.

.child-two{
position: absolute;
right: 0px;
}

Fixed

  It is used to position property and pin or fix an HTML element relative to the edges of the browser’s viewport. I will use these CSS position attribute in child three. If you use fixed position property you scroll the webpage but the fixed position is pined. These position are mostly used navigation bar.

.child-three{;
position: fixed;
top: 0px;
}

Sticky CSS Position Attribute

  It is used to position and stick and HTML element relative to top edge of the browser viewport. I will use these CSS position attribute in child four. What happens these time, I can scroll the page up and see that still distance between the top edge of the browser viewport and child four div is not 0px. I will scroll up the distance of the top edge and child four becomes 0px the child four is sticky. It is fixed to top edge of the browsers viewport.

.child-four{;
position: sticky;
top: 0px;
}

Leave a Reply