top বৈশিষ্ট্য

top বৈশিষ্ট্যটি মূল উপাদানের শীর্ষ থেকে উপাদানের শীর্ষ প্রান্তের অবস্থান নির্দেশ করে। বৈশিষ্ট্যের মানগুলি সাধারণত গৃহীত আকারের একক সহ নির্ধারণ করা যেতে পারে, যেমন পিক্সেল, ইঞ্চি, পয়েন্ট, শতাংশ। নির্ধারিত মানগুলি ঋণাত্মক সংখ্যাও হতে পারে, এই ক্ষেত্রে উপাদানগুলি একে অপরের উপর স্তূপীকৃত হবে। স্থানাঙ্কের গণনা position বৈশিষ্ট্য দ্বারা নির্ধারিত হয়, যেটি সাধারণত relative (আপেক্ষিক অবস্থান) বা absolute (পরম অবস্থান) মান গ্রহণ করে।

সিনট্যাক্স

cssসিলেক্টর {
  top: আকার বা 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-top: 50px;
  margin-left: 50px;
}
p:hover {
  top: 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;
  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;
}

Результат:

আরও দেখুন