CSS offset-position प्रयोग

विनिर्माण और उपयोग

offset-position गुणत्व तत्व को पथ पर प्रारंभिक स्थिति निर्धारित करता है。

यदि ऑफसेट-पैथ फ़ंक्शन अपनी स्वयं की शुरुआती स्थिति को निर्दिष्ट नहीं करता है तो offset-position का मान तत्व को एक बहिर्मुखी पथ पर घूमते समय की प्रारंभिक स्थिति निर्धारित करता है。

उदाहरण

उदाहरण 1

निर्दिष्ट तत्व की प्रारंभिक स्थिति दायाँ नीचे के रूप में होनी चाहिए:

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

अपने आप साफ़ी करें

उदाहरण 2

विभिन्न आरंभिक स्थान को देखें:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

अपने आप साफ़ी करें

CSS व्याकरण

offset-position: auto|normal|position|initial|inherit;

गुण मूल्य

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

ट्यूटोरियलःSVG पथ

ट्यूटोरियलःCSS एनिमेशन

संदर्भःCSS offset प्रयोग

संदर्भःCSS offset-anchor प्रयोग

संदर्भःCSS offset-distance प्रयोग

संदर्भःCSS offset-path प्रयोग

संदर्भःCSS offset-rotate प्रयोग