CSS
by
Admin
May 23, 2021
Position absolute, relative, fixed and sticky in CSS Free web Tutorials #25
Position absolute, relative, fixed and sticky in CSS Free web Tutorials #25
Position absolute, relative, fixed and sticky in CSS
यह ट्यूटोरियल वहीं से शुरू होता है जहां से #24 ट्यूटोरियल छूटा था। इस ट्यूटोरियल में, हम CSS के पोजिशन प्रॉपर्टी पर चर्चा करेंगे। CSS की मदद से आप अपने HTML Elements को अपनी पसंद की पोजीशन पर रख सकते हैं. इस ट्यूटोरियल के माध्यम से जाने के बाद, आप तत्वों की स्थिति में अंतर में महारत हासिल करेंगे। तो, बिना समय बर्बाद किए, आइए CSS पोजिशनिंग-संबंधित गुणों पर चर्चा करना शुरू करते हैं।
स्थिति संपत्ति के प्रकार:
पांच प्रकार की स्थिति संपत्ति है:
- स्थिर
- सापेक्ष
- पूर्ण
- तय
- चिपचिपा
स्थिति: स्थिर;
यह HTML तत्वों की डिफ़ॉल्ट स्थिति है।
स्थिति: रिश्तेदार;
इसका उपयोग तब किया जाता है जब हमें किसी HTML तत्व को उसकी सामान्य स्थिति के सापेक्ष रखने की आवश्यकता होती है।
हम ऊपर, दाएँ, नीचे और बाएँ गुण सेट कर सकते हैं जिससे तत्व सामान्य स्थिति से दूर समायोजित हो जाएगा।
उदाहरण: हमने नीचे दिए गए सीएसएस का उपयोग चार बॉक्स डिजाइन करने के लिए किया है जैसा कि दी गई छवि में दिखाया गया है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Tutorial</title>
<style>
.box{
border: 2px solid red;
display: inline-block;
width: 150px;
height: 150px;
margin: 2px;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
आउटपुट:
उपरोक्त छवि में सभी बक्सों की डिफ़ॉल्ट स्थिति स्थिर है। अब, हम स्थिति को स्थिर से बॉक्स 3 के सापेक्ष में बदल देंगे। यहाँ CSS का उपयोग किया गया है:
<style>
.box {
border: 2px solid red;
display: inline-block;
width: 150px;
height: 150px;
margin: 2px;
}
#box3 {
position: relative;
top: 34px;
left: 34px;
}
</style>
आप नीचे दी गई छवि में देख सकते हैं कि बॉक्स 3 अपनी सामान्य स्थिति के सापेक्ष ऊपर और बाईं ओर से 34px दूर स्थानांतरित हो गया है।
स्थिति: निरपेक्ष;
निरपेक्ष स्थिति वाला तत्व अपने मूल तत्व की स्थिति के अनुसार गति करेगा।
किसी भी मूल तत्व की अनुपस्थिति में, HTML तत्व को पृष्ठ के सापेक्ष रखा जाएगा।
अब, हमने बॉक्स 3 की स्थिति को सापेक्ष से निरपेक्ष में बदल दिया है। यहां इस्तेमाल किया गया सीएसएस है:
<style>
.box {
border: 2px solid red;
display: inline-block;
width: 150px;
height: 150px;
margin: 2px;
}
#box3 {
position: absolute;
top: 34px;
left: 34px;
}
.container{
border: 2px solid black;
background-color: khaki;
height: 3444px;
}
</style>
आप नीचे दी गई छवि में देख सकते हैं कि बॉक्स 3 पृष्ठ के बाईं ओर चला गया है।
स्थिति: निश्चित;
स्थिति के साथ एक तत्व: निश्चित; पृष्ठ स्क्रॉल करने के बाद भी एक विशिष्ट स्थिति में अटका रहेगा।
इस स्थिति संपत्ति का उपयोग तब किया जाता है जब हम एक HTML तत्व को एक निश्चित स्थान पर रखना चाहते हैं, चाहे उपयोगकर्ता पृष्ठ पर कहीं भी हो।
नीचे दी गई छवि में पृष्ठ के ऊपरी दाएं कोने में स्थित बॉक्स पर ध्यान दें। यहां इस्तेमाल किया गया सीएसएस है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Position In CSS</title>
<style>
.box{
border: 2px solid red;
display: inline-block;
width: 150px;
height: 150px;
margin: 2px;
}
#box3{
position: fixed;
right: 4px;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
आउटपुट:
स्थिति: चिपचिपा;
यह सापेक्ष और निश्चित स्थिति का एक संकर है।
स्थिति के साथ एक HTML तत्व: चिपचिपा; जब तक दी गई स्थिति ऑफसेट पूरी नहीं हो जाती तब तक बस वहीं बैठे रहेंगे।
चिपचिपा तत्व की बेहतर समझ प्राप्त करने के लिए नीचे दिए गए सीएसएस का प्रयोग करें।
#box3 {
position: sticky;
top: 3px;
}
हमने CSS के विभिन्न गुणों को सीखा है, और अगले ट्यूटोरियल में, हम अब तक सीखे गए HTML और CSS का उपयोग करके एक जिम वेबसाइट डिजाइन करेंगे। यह ट्यूटोरियल यहां समाप्त होता है, और मैं आपको अगले ट्यूटोरियल में देखूंगा।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
border: 2px solid black;
background-color: khaki;
height: 3444px;
}
/* CSS Position: static (default), relative, absolute, fixed, sticky */
.box{
display: inline-block;
border: 2px solid red;
width: 150px;
height: 150px;
margin: 2px;
}
#box3{
/* relative: Positions the element relative to its normal positon and will leave a gap at its normal position*/
/* position: relative; */
/* absolute: Positions the element relative to the positon of its first parent*/
/* position: absolute; */
/* top: 34px;
left: 134px; */
/* fixed: Positions the element relative to the browser window; */
/* position: fixed;
right: 4px;
bottom: 2px */
/* sticky: Positions the element relative to the users scroll position */
position: sticky;
top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">Chat with us</div>
<div class="box" id="box4">4</div>
</div>
</body>
</html>
