सीएसएस स्थिति संपत्ति
उदाहरण
एक <h2> तत्व की स्थिति बनाएं:
h2
{
position: absolute;
left: 100px;
top: 150px;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
position
गुण किसी तत्व (स्थिर, सापेक्ष, निरपेक्ष, स्थिर, या चिपचिपा) के लिए उपयोग की जाने वाली स्थिति विधि के प्रकार को निर्दिष्ट करता है ।
डिफ़ॉल्ट मान: | स्थिर |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 2 |
जावास्क्रिप्ट सिंटैक्स: | वस्तु । शैली। स्थिति = "पूर्ण" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
नोट: मान sticky
Internet Explorer या Edge 15 और पुराने संस्करणों में समर्थित नहीं है।
सीएसएस सिंटेक्स
position: static|absolute|fixed|relative|sticky|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
static | Default value. Elements render in order, as they appear in the document flow | |
absolute | The element is positioned relative to its first positioned (not static) ancestor element | |
fixed | The element is positioned relative to the browser window | |
relative | The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position | |
sticky | The element is positioned based on the user's scroll position
A sticky element toggles between |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
किसी तत्व को उसकी सामान्य स्थिति के सापेक्ष कैसे स्थापित करें:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
उदाहरण
अधिक स्थिति:
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position:
absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस पोजिशनिंग
एचटीएमएल डोम संदर्भ: स्थिति संपत्ति