bottom प्रॉपर्टी

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

सिंटैक्स

सिलेक्टर {
	bottom: माप की इकाई के साथ संख्या या auto;
}

उदाहरण

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

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

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

उदाहरण

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

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

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

यह भी देखें

top प्रॉपर्टी,
जो एलिमेंट के ऊपरी किनारे की पोजीशन सेट करती है
left प्रॉपर्टी,
जो एलिमेंट के बाएं किनारे की पोजीशन सेट करती है
right प्रॉपर्टी,
जो एलिमेंट के दाएं किनारे की पोजीशन सेट करती है
::backdrop प्स्यूडोएलिमेंट,
जो पहले एलिमेंट के बाद लोकेशन सेट करता है
caption-side प्रॉपर्टी,
जो टेबल के हैडिंग की पोजीशन सेट करती है