সিএসএস: কীভাবে নীচে ডানদিকে উপাদান অবস্থান?


101

আমি নীচের ডানদিকের কোণে "বেট 5 দিন আগে" পাঠ্য উপাদানটি রাখার চেষ্টা করছি। আমি কীভাবে এটি সম্পাদন করতে পারি? এবং আরও গুরুত্বপূর্ণ, দয়া করে ব্যাখ্যা করুন যাতে আমি সিএসএস জয় করতে পারি!

বিকল্প পাঠ


8
আপনি যদি আপনার বর্তমানে থাকা আপনার এইচটিএমএল এবং সিএসএস আমাদের দেখান তবে আরও সহজ হত।
জন হার্টসক

সিএসএস বিজয়ী করার সময়, আমি নিম্নলিখিত বইয়ের বইগুলি জিএমএই.ই.
ফিলিপ মারফি

উত্তর:


219

আপনার এইচটিএমএলকে এরকম কিছু দেখায় বলে দিন:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

তারপরে, সিএসএসের সাহায্যে আপনি সেই পাঠ্যটি নীচের অংশে ঠিক তেমনভাবে প্রদর্শিত করতে পারেন:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

যেভাবে এটি কাজ করে তা হ'ল একেবারে অবস্থানযুক্ত উপাদানগুলি সর্বদা প্রথম তুলনামূলকভাবে অবস্থানযুক্ত পিতা বা মাতা উপাদান বা উইন্ডোটির প্রতি সম্মানযুক্ত। যেহেতু আমরা বাক্সের অবস্থানটিকে আপেক্ষিক হিসাবে সেট করেছি, .bet_timeএর ডান প্রান্তটি ডান প্রান্তের ডান প্রান্তটি .boxএবং এর নীচের প্রান্তটি নীচের প্রান্তে রেখেছি.box


তবে কীভাবে সমাধান করতে হবে যদি .boxনিজেই হতে হয় position:absolute? অসম্ভব?
কালো

আপনার .boxএখনও আছে position:relative
কালো

.box2হলposition:absolute
অস্টিন হাইড

আপনার পিতামাতাকে সেট করার দরকার হতে পারেdisplay:inline-block;
বিলিএনয়ার

ধারক অবশ্যই আপেক্ষিক হতে হবে, এবং এতে থাকা সামগ্রী অবশ্যই পজিশনের জন্য অবশ্যই নিখুঁত, উজ্জ্বল! ধন্যবাদ
হরিয়ানো সারিপুত্র

26

সিএসএস position: relative;বক্সে সেট করুন । এর ফলে অভ্যন্তরের সমস্ত সামগ্রীর নিখুঁত অবস্থানগুলি সেই বাক্সের কোণগুলির সাথে সম্পর্কিত হতে পারে। তারপরে "5 দিন আগে বাজি" রেখায় নিম্নলিখিত সিএসএস সেট করুন:

position: absolute;
bottom: 0;
right: 0;

আপনি প্রান্ত থেকে টেক্সট অধিকতর দূরে স্থান থেকে প্রয়োজন হয়, আপনি পরিবর্তন হতে পারে 0জন্য 2pxবা অনুরূপ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.