किसी तत्व को लंबवत रूप से स्थिर और क्षैतिज रूप से निरपेक्ष कैसे रखें

समस्या:

एक उपयोगकर्ता एक बटन बनाना चाहता है जो व्यूपोर्ट से एक निश्चित ऊर्ध्वाधर दूरी बनाए रखता है, जबकि व्यूपोर्ट की परवाह किए बिना डिव के दाहिने किनारे से एक विशिष्ट दूरी भी बनाए रखता है आकार।

समाधान:

क्षैतिज स्थिति:

जबकि "पूर्ण क्षैतिज" स्थिति प्रदान की गई तकनीकी रूप से प्राप्त करने योग्य नहीं है समाधान, डिव के दाहिने किनारे से एक निश्चित दूरी बनाए रखने का लक्ष्य पूरा किया जा सकता है। क्षैतिज रूप से निश्चित तत्व के लिए बाएँ या दाएँ गुणों को सेट करने से बचकर, कंटेनर divs का उपयोग उसकी क्षैतिज स्थिति को नियंत्रित करने के लिए किया जाता है।

ऊर्ध्वाधर स्थिति:

तत्व स्थित है स्थिति का उपयोग करके लंबवत रूप से तय किया गया: निश्चित संपत्ति। शीर्ष मान सेट करके, व्यूपोर्ट आकार की परवाह किए बिना लंबवत स्थिति बनाए रखी जाती है।

कोड नमूना:

निम्नलिखित कोड कार्यान्वयन को प्रदर्शित करता है:

HTML:

सीएसएस:

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;}
div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

मुख्य विचार:

• यदि div.inflow div की एक निश्चित चौड़ाई है, तो div.positioner div आवश्यक नहीं हो सकता है, जो सीधे सेटिंग की अनुमति देता है निश्चित तत्व का बायाँ मार्जिन। सीमाएँ।