डीएचटीएल CSS पोजिशनिंग (CSS-P)

CSS एक ऐसा लाइब्रेरी है जो HTML एलिमेंट्स को स्टाइल लगाने के लिए उपयोग करता है।

उदाहरण

टिप्पणीःअधिकांश DHTML उदाहरण के लिए IE 4.0+、Netscape 7+ या Opera 7+ की आवश्यकता है!

position:relative
कैसे इस एलीमेंट को उसके सामान्य स्थान के आधार पर स्थापित करें
position:relative
कैसे सभी शीर्षकों को उसके सामान्य स्थान के आधार पर स्थापित करें
position:absolute
कैसे एक निर्दिष्ट मान को एक एलीमेंट को निर्धारित करें

आपको पाने के लिए इस पेज के नीचे अधिक उदाहरण मिलेंगे。

कौन-सी गुणवत्ताएँ CSS-P के साथ उपयोग की जाती है?

पहले, इस एलीमेंट को position गुणवत्ता (relative या absolute) निर्धारित करना होगा。

तब, मैं निम्नलिखित CSS-P गुणवत्ताओं को सेट कर सकता हूँ:

  • left - एलीमेंट के बाईं स्थान
  • top - एलीमेंट के ऊपरी स्थान
  • visibility - एलीमेंट को दृश्यमान या अदृश्य करना
  • z-index - एलीमेंट के ढलन क्रम
  • clip - एलीमेंट की काप करना
  • overflow - अधिक सामग्री का निपटारा कैसे करें

Position

CSS का position गुणवत्ता एक एलीमेंट को दस्तावेज़ में स्थापित करने के लिए उपयोग की जाती है。

position:relative

position:relative गुणवत्ता एक एलीमेंट को उसके सामान्य स्थान से स्थापित करती है。

इस उदाहरण में, इस div एलीमेंट को उसके सामान्य स्थान से 10 पिक्सल की दूरी पर स्थापित किया गया है:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute गुणवत्ता एक एलीमेंट को विंडो के मार्गिका से दूरी पर स्थापित करती है。

इस उदाहरण में, इस div एलीमेंट को उसके समावेशी बॉक्स के बाईं बाहरी मार्गिका से 10 पिक्सल की दूरी पर स्थापित किया गया है:

div
{
position:absolute;
left:10;
}

Visibility

visibility गुणवत्ता एक एलीमेंट को दृश्यमान या अदृश्य करने के लिए निर्धारित करती है。

visibility:visible

visibility:visible गुणवत्ता एलीमेंट को दृश्यमान करने के लिए उपयोग की जाती है。

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden गुणवत्ता एलीमेंट को अदृश्य करने के लिए उपयोग की जाती है。

h1
{
visibility:hidden;
}

Z-index

z-index गुणवत्ता एक एलीमेंट को दूसरे एलीमेंट के बाद रखने के लिए उपयोग की जाती है. z-index की मूलभूत मान 0 है. ज़िगुरूत्व की मान उच्चतर होने के साथ-साथ इसकी प्राथमिकता भी बढ़ती है. z-index: -1 का ज़िगुरूत्व कम है.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

उपरोक्त उदाहरण में, अगर h1 और h2 एक दूसरे के ऊपर लगे हैं, तो h2 एलीमेंट h1 के ऊपर होगा。

फिल्टर

filter गुणवत्ता आपको पाठ और इमेज को अधिक शैली प्रभाव जोड़ने की अनुमति देता है。

h1
{
width:100%;
filter:glow;
}

टिप्पणीःfilter गुण का उपयोग करने के लिए हमेशा एलिमेंट की चौड़ाई निर्दिष्ट करें

ऊपरी उदाहरण से नीचे का आउटपुट उत्पन्न होता है:

हेडर

विभिन्न फिल्टर

टिप्पणीःअगर background-color गुण को transparent सेट नहीं किया गया है, तो कुछ Filter गुण काम नहीं करेंगे!

गुण पारामीटर वर्णन उदाहरण
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 आपको एलिमेंट की पारदर्शिता सेट करने देता है 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 एलिमेंट को धुंधला करें 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color निर्दिष्ट रंग को पारदर्शी बनाएं 
filter:chroma(
color=#ff0000)
fliph none एलिमेंट को आड़े दिशा में उल्टा करें filter:fliph;
flipv none एलिमेंट को खड़े दिशा में उल्टा करें filter:flipv;
glow
  • color
  • strength
 एलिमेंट को चमकाएं 
filter:glow(
color=#ff0000,
strength=5);
gray none श्वेत-सफेद के रंग से एलिमेंट प्रस्तुत करें filter:gray;
invert none एलिमेंट को उल्टी रंग और चमकीलापन के मानों से प्रस्तुत करें filter:invert;
mask color विशिष्ट पृष्ठभूमि रंग और पारदर्शी अग्रभूमि रंग के साथ एलिमेंट प्रस्तुत करें 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 शेडॉ के साथ एलिमेंट प्रस्तुत करें 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 शेडॉ के साथ एलिमेंट प्रस्तुत करें 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 एलिमेंट को तरंगाकार दिखाएं 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none काले और श्वेत रंगों के साथ विपरीत रंग और चमकीलापन के मान को दिखाने के लिए इस्तेमाल करें filter:xray;

Background

background अभियान को आपको अपना पृष्ठभूमि चुनने की अनुमति देता है。

background-attachment:scroll

पृष्ठभूमि घुमाने पर घुमाएगी。

background-attachment:fixed

पृष्ठभूमि घुमाने पर घुमाएगी नहीं。

और भी इन्स्टांस

Visibility
किसी एलिमेंट को अदृश्य करने के तरीके।आप इस एलिमेंट को दिखाना चाहते हैं या नहीं?
Z-index
Z-index को एक एलिमेंट को दूसरे एलिमेंट के बाद रखने के लिए उपयोग किया जा सकता है, Z-index क्रम के द्वारा।
Z-index
देखिए, एलिमेंट का Z-index क्रम परिवर्तित हो गया है。
कर्सर
साइस्क्रिप्ट के द्वारा माउस पॉइंटर की शैली को बदलें
फिल्टर
फिल्टर अभियान के द्वारा शीर्षक के शैली को बदलें
इमेज पर फिल्टर
फिल्टर अभियान भी इमेज पर लागू किया जा सकता है, यहाँ कुछ फिल्टर अभियान लगाए गए इमेज के उदाहरण हैं。
वाटरमार्क
पृष्ठ घुमाने पर पृष्ठभूमि चित्र घुमाएगा नहीं。