CSS positioning Property क्या हैं पूरी जानकारी हिंदी में?

November 10, 2021

Facebook

इस Tutorial में हम आपको CSS position Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.

List of Content

CSS position Property का परिचय – Introduction to CSS position in Hindi.
Different Type of position Property
आपने क्या सीखा?

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 कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS static Position Examples</title>

</style>
<body>
<div>

<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 कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS relative Position Examples</title>

</style>
<body>
<div>

<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 कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS fixed Position Examples</title>

</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 कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS absolute Position Examples</title>

.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 आपके लिए उपयोगी साबित होगा.

#BeDigital