CSS Position Property In Hindi – Is Tutorial Me Hamne Position Property Ko Pura Explain Kiya Hai, Achhe Se Smjhne Ke Liye Is Tutorial Ko Kuchh Parts Me Divide Kiya Hai |
Yadi Aapne HTML Full Course And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |
Position Property In CSS In Hindi
Contents
Kisi Bhi Web Page Me Html Elements Ka Ek Nishchit Position Define Hota Hai , Aur Vo Element Web Page Me Usi Karm Me Show Hote Hai | Ye Html Element Ki Default Position Hoti Hai |
But Ham CSS Ki Position Property Ki Help Se Is Default Position Ko Change Kar Skte Hai, Matlb Html Element Ko Apnse Hisab Se Position De Skte Hai, Aur Apne Anusar Layout Design Kar Skte Hai |
Position Property Ki Help Se Ham Web Page Me Kisi Element Ko Left-Right, Top-Bottom , Jha Chahe Vha Set Kr Skte Hai , Isliye Position Property CSS Ki Ek Bahut Important Property Hai |
Types Of CSS Position Property in Hindi
CSS Me position Property Ki Mainly 5 Values Hoti Hai , Jo Ham Kisi Element Ke Liye Set Kar Skte Hai , Jo Ki Nimn Hai –
- static
- relative
- absolute
- fixed
- sticky
Kisi Element Ke Liye position Property Set Krne Ke Bad, Ham Us Element Ke Liye top , bottom , left and right Properties Set Krte Hai , In Properties Ko Ham Helper Properties Bhi Bol Skte Hai ,Kyoki Ye position Properties Ke Sath Hi Kam Li Jati Hai Aur Kisi Element Ko Position Dene Me position Properties Ki Help Krti Hai |
Dhyan Rhe Ki top, bottom, left, right Properties position Property Set Krne Ke Bad Hi Kam Krti Hai , Aur position Property Par Depend Krti Hai |
position: static In CSS In Hindi
Static, Html Elements Ki Default Position Hoti Hai, Matlab Html Elements Ko Jis Karm Me Declare Kiya Jata Hai Vo Web Page Par Usi Karm Me Show Hote Hai |
Note : top, bottom, left, right Properties Ka Static Elements Par Koi Effect Nhi Pdta |
Example: Static Position Ko Smjhne Ke Liye 3 Div Liye Hai Aur Unme Se Ek Ko Class “static” Aur Do Div Ko Class “a” Di Hai, “static” Class Wale Div Ke Liye Hmne Positon Aur left, bottom etc. Properties Set Ki Hai |
<!DOCTYPE html>
<html>
<head>
<style>
.static {
position: static;
left: 10px;
bottom: 10px;
background-color: hotpink;
padding: 10px;
}
.a {
padding: 10px;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutorial</h2>
<div class="a">
Position not set for this div.
</div>
<div class="static">
Position static for this div.
</div>
<div class="a">
Position not set for this div.
</div>
</body>
</html>Output :
Jaisa Ki Output Me Dikh Rha Hai Ki Tino Div Apne Normal Flow Me Hi Show Ho Rhe Hai |
position: relative In CSS In Hindi
Relative Position Bhi Static Position Ki Tarah Hi Kam Krti Hai , But Kisi Element Ki Position Relative Set Krne Ke Bad Vah Left , Right Top Ya Bottom Ki Taraf Move Kar Skta Hai , Jitni Value Ham top, bottom, left Ya right Property Ko Denge Element Utna Hi Apni Normal Position Se Move Krta Hai |
Example : Uper Diye Gye Example Me Hi position static ko relative Se Replace Kar Dete Hai |
<!DOCTYPE html>
<html>
<head>
<style>
.static {
position: relative;
left: 10px;
bottom: 10px;
background-color: hotpink;
padding: 10px;
}
.a {
padding: 10px;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutorial</h2>
<div class="a">
Position not set for this div.
</div>
<div class="static">
Position static for this div.
</div>
<div class="a">
Position not set for this div.
</div>
</body>
</html>Output :
Hamne Notice Kiya Ki Element Apni Normal Position Se 10 px Left Aur Bottom Se 10 px Move Kar Gya , Jo Ki Hmne Set Ki Hai |
position: absolute In CSS In Hindi
Position Absolut Bhi Relative Position Ki Tarah Hi Kam Krti Hai Bas Itna Sa Difference Hai Ki Isme Element Apne Parent Element Ke Anusar Apni Position Badlta Hai , Matlb Kisi Element Ki Absolute Positon Uske Parent Element Par Depend Krti Hai |
Jab Position Absolute Wale Element Ka Koi Parent Element Nhi Hota To Vah Browser Window Ko Use Krta Hai Aur Uske Hisab Se Apne Apko Left Right Etc. Position Deta Hai
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position: relative;
width: 400px;
height: 200px;
border: 3px solid blue;
}
.child {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutoral</h2>
<div class="parent ">This div element has position: relative;
<div class="child">This div element has position: absolute;</div>
</div>
</body>
</html>Output :
Jaisa Ki Hmne Dekha Ki Parent Element Ke Hisab Se, Child Element Ne Apni Position Set Ki Hai |
position: fixed In CSS In Hindi
Fixed Position Wala Element Viewport (Browser Window) Ke Hisab Se Show Hota Hai, Ham Jis Jagah Chahe Us Jagah Us Element Ko top, bottom, left, right Properties Ki Help Se Set Kar Skte Hai , Fixed Position Wala Element Web Page Par Hmesha Ek Hi Jagah Par Fixed Rhta Hai , Ham Page Ko Scroll Krenge Tab Bhi Vo Element Usi Jagah Fixed Rhega |
Fixed Position Property Ka Use Commonly Navigation Bar Bnane Me Kiya Jata Hai | Aapne Dekha Hoga Ki Kuchh Websites Me Page Ko Scroll Krne Par Bhi Uska Navigation Bar Fixed Hota Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 4px solid blue;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutoral</h2>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>Output :
To Hmne Dekha Ki Kis Tarah Ham Kisi Element Ko Web Page Par Fixed Position Par Set Kar Skte Hai |
position: sticky In CSS In Hindi
Aapne Kabhi Na Kbhi Dekha Hoga Ki Jb Ham Kisi Web Page Ko Scroll Krte Hai To Achanak Hi Koi Element Ek Jagah Par Stick Ho Jata Hai , Aisa Sticky Property Ki Help Se Hi Kiya Jata Hai |
Sticky Property Ko Ham Relative Aur Fixed Property Ka Combination Man Skte Hai , Aur Yah Scroll Ki Position Par Depend Krti Hai |
Note : Position Sticky Tab Work Krti Hai Jab bottom , top, left, right Inme Se Kam Se Kam Ek Property Ki Value Set Ki Gyi Ho |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position:sticky;
top: 0px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutoral</h2>
<div class="sticky">I am sticky!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
</body>
</html>Output :
Jab Ham Page Ko Scroll Krte Hai, Tab Sticky Wala Div Top Se 0 px Par Fixed Ho Jata Hai , Chahe User Page Ko Scroll Kr Rha Ho |
Overlapping Elements In CSS In Hindi
Jab Ham Elements Ko Positon Dete Hai, To Vo Dusre Element Se Overlap Kr Skte Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS z-index Property Example</title>
<style>
.a {
width:250px;
height:250px;
background:yellow;
position:absolute;
top:80px;
left:80px;
}
.b {
width:250px;
height:250px;
background:green;
position:absolute;
top:120px;
left:120px;
}
</style>
</head>
<body>
<h2>Master Programing CSS Positon Tutorial</h2>
<div class="a">This is Div1.</div>
<div class="b">This is Div2.</div>
</body>
</html>Output :
Hmne Dekha Ki Ek Div, Dusre Div Se Overlap Kr Rha Hai |
Is Problem Ko Solve Krne Ke Liye z-index Property Ka Use Kiya Jata Hai , z-index Property Element Ko Z-Axis Par Move Krane Ka Kam Krti Hai , Mtlb Konsa Element Front Me Dikhega Aur Konsa Element Back Me Dikhega , Ye z-index Property Se Set Kiya Jata Hai , z – index Property Element Ka Stack Order Decide Krti Hai |
Note : z-index , Static Position Par Apply Nhi Hota |
Ab Man Lo Ki Upr Wale Example Me Ham Pahle Div (Yellow) Ko Front Me Dikhana Chahte Hai To z-index Ki Help Se Ham Yah Kr Skte Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS z-index Property Example</title>
<style>
.a {
width:250px;
height:250px;
background:yellow;
position:absolute;
top:80px;
left:80px;
z-index : 2;
}
.b {
width:250px;
height:250px;
background:green;
position:absolute;
top:120px;
left:120px;
z-index : 1;
}
</style>
</head>
<body>
<h2>Master Programing CSS Positon Tutorial</h2>
<div class="a">This is Div1.</div>
<div class="b">This is Div2.</div>
</body>
</html>Output :
Stack Order Jyada Wala Element , Stack Order Km Wale Element Ke Top Me Rhta Hai |
Note : Agr Ham z-index Property Apply Nhi Krte To Overlap Krne Wale Element Me , Vo Element Top Par Hoga Jo Html Code Me Last Me Ata Hai |
Positioning Text In an Image In CSS In Hindi
Kisi Image Par Text Ko Bhi Different-Different Position De Skte Hai |
Example : Is Example Me Image Unsplash Site Se Li Hai , Jha Se Aap Without Copyright Ke ,Free Images Use Kr Skte Hai |
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
img {
width: 100%;
height: 350px;
}
.topleft {
position: absolute;
top: 10px;
left: 16px;
font-size: 30px;
color : yellow;
}
.topright {
position: absolute;
top: 10px;
right: 16px;
font-size: 30px;
color : Yellow;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 30px;
color : yellow;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 30px;
color : yellow;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 30px;
color : yellow;
}
h2{
text-align : center;
color : Blue;
}
</style>
</head>
<body>
<h2>Master Programing CSS Position Tutorial</h2>
<div class="container">
<img src="https://images.unsplash.com/photo-1612981453053-184fd648b66b?ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90
by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=701&q=80">
<div class="topleft">Top Left</div>
<div class="topright">Top Right</div>
<div class="center">Centered</div>
<div class="bottomleft">Bottom Left</div>
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>Output :
Is Tarah Ham Image Par Jha Chahe Vha Koi Text Show Kra Skte Hai |
Age CSS Position Se Related Koi Doubt Hai To Aap Comment Section Me Puchh Skte Hai .
