Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

सीएसएस के साथ फिक्स्ड पोजिशनिंग


फिक्स्ड पोजिशनिंग आपको स्क्रॉलिंग की परवाह किए बिना, पृष्ठ पर किसी विशेष स्थान पर किसी तत्व की स्थिति को ठीक करने की अनुमति देती है। निर्दिष्ट निर्देशांक ब्राउज़र विंडो के सापेक्ष होंगे।

आप दो मान ऊपर और बाएं का उपयोग कर सकते हैं स्थिति . के साथ HTML दस्तावेज़ में कहीं भी HTML तत्व को स्थानांतरित करने के लिए संपत्ति।

  • बाएं ले जाएं - बाएं . के लिए ऋणात्मक मान का उपयोग करें ।
  • दाएं ले जाएं - बाएं . के लिए धनात्मक मान का उपयोग करें .
  • ऊपर जाएं - शीर्ष . के लिए ऋणात्मक मान का उपयोग करें ।
  • नीचे ले जाएं - शीर्ष . के लिए धनात्मक मान का उपयोग करें ।

उदाहरण

फिक्स्ड पोजिशनिंग को लागू करने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं

 <html>
    <head>
    </head>
    <body>
       <div style = "position:fixed; left:80px; top:20px; background-color:blue;color:white;">
          This div has fixed positioning.
       </div>
    </body>
</html>

  1. CSS के साथ फ्लोटिंग एलिमेंट्स CSS के साथ फ्लोटिंग एलिमेंट्स

    CSS फ्लोट प्रॉपर्टी का उपयोग किसी बॉक्स या सामग्री की स्थिति या स्वरूपण के लिए किया जाता है। CSS फ्लोट के साथ डेवलपर तत्व को बाएँ या दाएँ स्थान दे सकता है। फ्लोट प्रॉपर्टी में निम्न में से कोई एक मान हो सकता है - बाएं - तत्व अपने कंटेनर के बाईं ओर तैरता है दाएं - तत्व अपने कंटेनर के दाईं ओर तैरता

  1. सीएसएस के साथ एक निश्चित/चिपचिपा पाद लेख कैसे बनाएं? सीएसएस के साथ एक निश्चित/चिपचिपा पाद लेख कैसे बनाएं?

    CSS के साथ निश्चित पादलेख बनाने के लिए, कोड इस प्रकार है - उदाहरण body{ font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .पाद लेख {फ़ॉन्ट-आकार:20px; स्थिति:निश्चित; बाएं:0; नीचे:0; चौड़ाई:100%; पृष्ठभूमि-रंग:आरजीबी (50, 6, 100); रंग सफेद; पाठ-संरेखण:केंद्र; }फिक्स्ड/स्टिकी फूटर उदाहर

  1. सीएसएस के साथ एक परिपत्र पथ में एक तत्व को कैसे स्थानांतरित करें? सीएसएस के साथ एक परिपत्र पथ में एक तत्व को कैसे स्थानांतरित करें?

    CSS एनिमेशन संयोजन, घुमाकर और अनुवाद करके तत्वों को विभिन्न तरीकों से बदलने में हमारी सहायता कर सकते हैं। निम्नलिखित उदाहरण बताते हैं कि हम किसी तत्व को वृत्ताकार पथ में कैसे घुमा सकते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> div {    margin: 8%;   &n