इस Tutorial में हम आपको CSS position Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.
List of Content
CSS position Property का परिचय
CSS Box Model के अनुसार प्रतयेक HTML Element एक Square Box होता हैं. जो Margin, Border, Padding, और Content से मिलकर बना होता हैं.
जब किसी Webpage में Elements को Define किया जाता हैं तो उनको एक के बाद एक के क्रम में Define किया जाता हैं. और ये सभी Elements इसी क्रम में Show होते हैं. यह Elements की Default Position होती हैं
लेकिन, CSS Position Property द्वारा इस Default Position को Change किया जा सकता हैं.
Web Designers अपनी जरूरत के अनुसार HTML के प्रत्येक Element की Position को निर्धारित कर सकते हैं. जिससे मनचाहा Layout Design कर सकते हैं.
विभिन्न प्रकार की position Property
CSS Position Property द्वारा मनचाहा Layout Design करने के लिए कई प्रकार की Position Properties को उपलब्ध करवाया गया हैं. जिनके बारे में नीचे बताया जा रहा हैं.
- static Position
- relative Position
- fixed Position
- absolute Position
static Position
प्रत्येक HTML Element की By Default Position static होती हैं. जिस क्रम में Element को Define करते हैं. उसी क्रम में Elements Show होते हैं.
जैसे किसी HTML Document में पहले एक Image Define किया हैं. और इस Image के बाद एक Paragraph Define किया हैं. तो ये Show भी इसी क्रम में होंगे. पहले Image और फिर Paragraph.
इसे Try कीजिए
<html>
<head>
<title>CSS static Position Examples</title>
<style type=”text/css”>
p {
border: 1px solid red;position:static;
}
</style>
<body>
<div>
<img src=”tree.png” />
<p>This is paragraph. This paragraph is defined after an Image. And now it is showing after that image. This is its default position.</p>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is paragraph. This paragraph is defined after an Image. And now it is showing after that image. This is its default position.
relative Position
relative Position भी static Position की तरह काम करती हैं. यह Element के Normal Flow को प्रभावित करती हैं. किसी Element की Position Relative Define करने पर वह अपनी Normal Position से top, bottom, right, left सरक सकता हैं. और इसकी खाली जगह में अन्य Element Adjust नही होता हैं.
relative Position को top, bottom, left, right Value देकर Define किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS relative Position Examples</title>
<style type=”text/css”>
p {
border: 1px solid red;position:relative; left: 30px;
}
</style>
<body>
<div>
<img src=”tree.png” />
<p>This is paragraph. This paragraph is defined after an Image. And now it is showing below this image 50px left. This is its relative position.</p>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is paragraph. This paragraph is defined after an Image. And now it is showing below this image 50px left. This is its relative position.
fixed Position
fixed Position को absolute Position की बहन माना गया हैं. क्योंकि इन दोनों Position का Behave लगभग एक जैसा रहता हैं.
जब किसी Element की Position fixed Define की जाती हैं, तो वह Element उसी Position पर Fix हो जाता हैं और Webpage को Scroll करने पर भी नही टहलता हैं.
fixed Position को Viewport यानि Browser Window के अनुसार top, bottom, right, left Value देकर Define किया जा सकता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS fixed Position Examples</title>
<style type=”text/css”>
p {
border: 1px solid red;position:fixed;bottom: 100px;right:0;
}
</style>
<body>
<div>
<p>This is fixed.</p>
</div>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is fixed.
इसका परिणाम आप आपकी स्क्रीन के दांए तरफ देख सकते है. यह एक paragraph है जिसे red border मे define किया गया है. जो एक fixed Position का उदाहरण हैं.
absolute Position
यह Position भी कुछ-कुछ fixed Position की तरह Behave करती हैं. किसी Element की absolute Position उसके Parent Element के अनुसार तय होती हैं. लेकिन, Parent Element की Position static Defined नही होनी चाहिए.
इसे Try कीजिए
<html>
<head>
<title>CSS absolute Position Examples</title>
<style type=”text/css”>
.div1 {
border: 1px solid red;position:relative;right: 0;bottom:0;width: 200px;height:300px;
}
.div2 {
border: 1px solid green;position:absolute: right: 50px; bottom: 50px;width: 100px; height: 100px;
}
</style>
<body>
<div>
</div class=”div1″>
<div>
</div class=”div2″>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Position के बारे में पूरी जानकारी दी हैं. आपने HTML Elements की विभिन्न Positions के बारे में उदाहरण सहित समझा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
Leave a Reply