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 कर सकते हैं।
Different Types of 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।
<!DOCTYPE html>
<html>
<head>
<title>CSS static Position Examples</title>
p {
border: 1px solid red;position:static;
}
<body>
<div>
</body>
<style type="text/css">
</style>
<img src="Image Path" />
<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>
</html>OUTPUT-
<html>
<head>
<title>CSS static Position Examples</title>
p {
border: 1px solid red;position:static;
}
<body>
<div>
</body>
<style type="text/css">
</style>
<img src="Image Path" />
<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>
</html>
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 किया जा सकता हैं।
<!DOCTYPE html>
<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>
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 किया जा सकता हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS fixed Position Examples</title>
p {
border: 1px solid red;position:fixed;bottom: 100px;right:0;
}
<body>
<div>
</body>
<style type=”text/css”>
</style>
<p>This is fixed.</p>
</div>
</html>
Absolute Position
यह Position भी कुछ-कुछ Fixed Position की तरह Behave करती हैं। किसी Element की Absolute Position उसके Parent Element के अनुसार तय होती हैं। लेकिन, Parent Element की Position Static Defined नही होनी चाहिए।
<!DOCTYPE html>
<html>
<head>
<title>CSS absolute Position Examples</title>
.div1 {
border: 1px solid red;position:relative;right: 0;bottom:0;width: 200px;height:300px;
}
border: 1px solid green;position:absolute: right: 50px; bottom: 50px;width: 100px; height: 100px;
}
<body>
<div>
<div>
</body>
<style type=”text/css”>
.div2 {
</style>
</div class=”div1″>
</div class=”div2″>
</html>
For Any Doubt Clear on Telegram Discussion Group
No comments:
New comments are not allowed.