Tuesday, 23 April 2013

CSS Static, Absolute, Relative, Fixed Positioning How Do They Differ ?

Static :
A STATIC positioned element is what are we get by DEFAULT.

Or

Normal positioning of objects.

Or

একটি element স্বাভাবিক (default)অবস্থায় যে অবস্থানে থাকে সেটিই তার static position ।অর্থাৎ element এ কোন position set করা না হলে default তার position static (style="position:static") । 

Relative :
Relative to it’s (element) current position, but can be moved.

Or

A RELATIVE positioned element is positioned relative to ITSELF.

Or

কোন element এর relative position হল ঐ element টির current position যা অন্য কোন element এর সাপেক্ষে নয়।কোন element এর style="position:relative; left: 20px;" এর অর্থ হল কোন element তার current position এর ডান থেকে বামে 20px সরবে। 

Fixed :
An element is fixed to the browser window.

Or

A FIXED positioned is positioned relative to THE BROWSER WINDOW.

Or

Fixed position element টি সবসময় browser window এর সাপেক্ষে তার অবস্থান পরিবর্তন করবে অন্য কোন element (div, span, body, h1, h2 ....) এর সাপেক্ষে নয়। যেমন : style="position:fixed; left: 10px; top: 50%;" অর্থাৎ element টি browser window এর top থেকে buttom এর দিকে 50% (মাঝখানে) নিচে এবং left থেকে 10px right এ থাকবে। 

Absolute :

Relative to the last relatively positioned object, if one is present, then it works like fixed.....relative to the window.

Or

An ABSOLUTE positioned element is positioned relative to ITS CLOSEST POSITIONED PARENT. if one is present, then it works like fixed.....relative to the window.

Or

কোন element এর closest(last relatively positioned element) parent এর position যদি relative হয়( style="position:relative;"), তবে ঐ element টি তার ঐ closest parent অনুযায়ী position change করবে।
<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

এখানে যেহেতু 2nd parent div টির position relative তাই middle div টি 2nd parent div অনুযায়ী position change করবে। যদি 1st parent div এর position relative হত তবে Middle div টি 1st parent div অনুযায়ী position change করতো। 

Reference-1 : http://www.youtube.com/watch?v=dSYg9-S-S9I

Reference-2 : http://www.youtube.com/watch?v=-pW8HZdIuEk

No comments:

Post a Comment