CSS Layout — Position

Position Property

Position দিয়ে element কোথায় বসবে নির্ধারণ করা হয়।

১. static (default)

স্বাভাবিক ধারা অনুযায়ী বসে। top/left কাজ করে না।

২. relative

নিজের স্বাভাবিক অবস্থান থেকে সরানো যায়।

.box {
    position: relative;
    top: 20px;      /* নিচে 20px */
    left: 30px;     /* ডানে 30px */
}

৩. absolute

নিকটতম positioned parent এর সাপেক্ষে অবস্থান। স্বাভাবিক flow থেকে সরে যায়।

.parent {
    position: relative;  /* গুরুত্বপূর্ণ! */
    width: 400px;
    height: 300px;
}
.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

৪. fixed

Viewport (browser window) এর সাপেক্ষে। Scroll করলেও একই জায়গায় থাকে।

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

৫. sticky (আধুনিক)

Relative + Fixed এর মিশ্রণ। Scroll না করা পর্যন্ত relative, তারপর fixed।

.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

z-index (স্তর)

Positioned element গুলো overlap করলে কোনটি উপরে থাকবে।

.modal { z-index: 1000; }    /* সবার উপরে */
.dropdown { z-index: 500; }
.normal { z-index: 1; }

Float (পুরনো কিন্তু এখনো দরকারি)

img {
    float: left;   /* right, none */
    margin-right: 15px;
}
/* text ছবির চারপাশে wrap হবে */

.clear {
    clear: both;  /* float বন্ধ */
}

Overflow

.box {
    overflow: visible;   /* default — বের হয় */
    overflow: hidden;    /* কেটে ফেলে */
    overflow: scroll;    /* scroll bar */
    overflow: auto;      /* দরকার হলে scroll */
    overflow-x: auto;    /* শুধু অনুভূমিক */
    overflow-y: hidden;
}