CSS में Display और Positioning का उपयोग HTML elements को webpage पर दिखाने और उनकी जगह (location) को नियंत्रित करने के लिए किया जाता है।
1. CSS Display Property
display property यह बताती है कि कोई HTML element webpage पर किस प्रकार दिखाई देगा।
Syntax:
selector {
display: value;
}Display Property के मुख्य Types :
| Display Value | Meaning (अर्थ) | Example |
|---|---|---|
| block | पूरा available width लेता है और नई line से शुरू होता है | div, p, <h1> – <h6> , <section> |
| inline | केवल जितनी जरूरत हो उतनी जगह लेता है | span, a , strong |
| inline-block | inline की तरह रहता है लेकिन width/height दे सकते हैं | button, img |
| none | element को hide कर देता है | display:none |
| flex | flexible layout बनाने के लिए | navbar, cards |
| grid | row और column layout के लिए | website layout |
| table | table की तरह behave करता है | table design |
2. CSS Positioning Property
Position property का उपयोग HTML element की location को control करने के लिए किया जाता है।
Syntax:
selector {
position:value;
}Types of CSS Position :
| Position Value | Meaning |
|---|---|
| static | Default position |
| relative | अपनी original जगह से move |
| absolute | Parent के अनुसार position |
| fixed | Screen पर fix रहता है |
| sticky | Scroll करने पर fix होता है |
Z-index Property
जब elements overlap होते हैं तो कौन ऊपर दिखेगा यह control करता है।
Example :
.box1{
position:absolute;
z-index:2;
}
.box2{
position:absolute;
z-index:1;
}