left प्रॉपर्टी

left प्रॉपर्टी एलिमेंट के बाएं किनारे की पोजीशन सेट करती है। इस प्रॉपर्टी के लिए वैल्यूज आम तौर पर इस्तेमाल होने वाली साइज यूनिट्स में दी जा सकती हैं, जैसे कि पिक्सेल, इंच, पॉइंट, परसेंटेज में। दी गई वैल्यूज नेगेटिव नंबर भी हो सकती हैं, इस स्थिति में एलिमेंट एक दूसरे पर ओवरलैप हो जाएंगे। कोऑर्डिनेट की गणना position प्रॉपर्टी द्वारा तय होती है, जो आमतौर पर relative (रिलेटिव पोजीशन) या absolute (एब्सोल्यूट पोजीशन) वैल्यू लेती है।

सिंटैक्स

cssसिलेक्टर {
  left: साइज या auto;
}

उदाहरण

आइए चाइल्ड एलिमेंट पर होवर करने पर उसके बाएं किनारे की पोजीशन 25px के बराबर सेट करें:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

उदाहरण

और अब होवर करने पर चाइल्ड एलिमेंट का बायां किनारा -50px पर लोकेटेड हो:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

यह भी देखें