CSS Position Property Kya Hoti hai ?

CSS positioning ek important concept hai jo kisi bhi webpage ke elements ko sahi tarike se place karne ke liye use hota hai. Positioning properties ka use karke hum elements ko control kar sakte hain ki wo screen ya dusre elements ke sath kaise behave karein.

Chaliye, in sabhi positioning properties ko detail me samajhte hain:

1. Static Positioning (position: static;)

Ye default positioning hoti hai jo kisi bhi HTML element par apply hoti hai agar hum explicitly position set nahi karte. Is position me element normal document flow me rehta hai aur top, left, right, ya bottom properties ka koi effect nahi hota.

.box {
    position: static;
    top: 50px;  /* Ye kaam nahi karega */
    left: 50px; /* Ye bhi kaam nahi karega */
}

Element apni normal jagah par rahega, top ya left move nahi karega.

2. Relative Positioning (position: relative;)

In CSS, position: relative; is a property that positions an element relative to its normal position in the document flow. This means that the element still occupies space in the layout as it normally would, but you can move it using the properties:

top (moves the element down when given a positive value, and up when negative).
bottom (moves the element up when given a positive value, and down when negative).
left (moves the element right when given a positive value, and left when negative).
right (moves the element left when given a positive value, and right when negative).

Key Points:

• The element remains in the document flow, meaning other elements behave as if the element were in its original position.
• It shifts the element without affecting surrounding elements.
• The movement is relative to its original position, not the parent element.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Element apni original position se 20px neeche aur 30px right move karega, lekin uski pehli jagah (space) preserved rahegi.

3. Absolute Positioning (position: absolute;)

Absolute position wale elements apne nearest positioned ancestor (relative ya fixed element) ke according place hote hain. Agar koi parent element positioned nahi hai, to yeh entire webpage ke according position le lega.

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 50px;
    left: 50px;
}

.box element apne closest positioned ancestor (.container) ke top-left se 50px shift hoke place hoga. Agar container pe position: relative; na hoti to .box pure page ke according place hota.

4. Fixed Positioning (position: fixed;)

Fixed positioning ka matlab hai ki element hamesha viewport (screen) ke according position me rahega, chahe page scroll ho ya nahi. Yeh mostly sticky headers, navigation bars, or floating buttons ke liye use hota hai.

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: black;
    color: white;
    padding: 10px;
}

Navbar hamesha screen ke top par rahega, chahe user page scroll kare.

5. Sticky Positioning (position: sticky;)

Sticky positioning relative aur fixed dono ka combination hota hai. Jab tak ek specific point tak scroll nahi hota, tab tak element relative behave karta hai, lekin jaise hi wo point aata hai, wo fixed ho jata hai.

.header {
    position: sticky;
    top: 0;
    background: yellow;
    padding: 10px;
}

.header element normal flow me rahega, lekin jaise hi page scroll hoke top: 0; tak pahunchta hai, yeh fixed ho jayega.

6. Z-Index (z-index property)

Z-Index ek CSS property hai jo elements ki stacking order ko control karti hai. Jab multiple elements ek doosre ke upar overlap hote hain, toh z-index decide karta hai ki kaunsa element upar dikhai dega aur kaunsa neeche.

Z-Index Working Kaise Karta Hai?

Higher Value → Upper Layer

Jiska z-index zyada hoga, wo element doosre elements ke upar dikhai dega.
Example: Agar ek div ka z-index: 10 hai aur doosre ka z-index: 5, toh pehla div doosre ke upar hoga.

Default Value → Auto

Agar kisi element ka z-index define nahi kiya gaya hai, toh wo default flow ke according render hoga.

Negative Z-Index

Agar kisi element ka z-index negative (-1, -5, etc.) hai, toh wo background ya doosre elements ke neeche chala jayega.

Z-Index Sirf Positioned Elements Par Kaam Karta Hai

z-index sirf positioned elements par kaam karta hai, yani jinka position: relative, absolute, fixed ya sticky ho. Agar element ka position: static hai, toh z-index apply nahi hoga.

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 1;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    width: 100px;
    height: 100px;
    background: blue;
    z-index: 2; /* Higher value, so it will appear above box1 */
}

Blue box (box2) red box ke upar appear hoga kyunki z-index: 2; hai jo z-index: 1; se bada hai.

Positioning Summary

Quiz: Test Your Knowledge on CSS Position Property
Bonus: Practical Application!

Aaj hi apne webpage par CSS position property ka istemal karke dekhein!

CSS position property ko sahi tareeke se samajhne ke liye different types jaise static, relative, absolute, fixed, aur sticky position ka upayog karein aur apne webpage ke layout ko aur bhi effective banayein.