top प्रॉपर्टी

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

सिंटैक्स

सिलेक्टर {
	top: साइज या 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;
	margin-left: 50px;
}
p:hover {
	top: 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;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	top: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

यह भी देखें

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