ویژگی bottom در CSS برای تنظیم موقعیت پایین عنصر موقعیت‌دار استفاده می‌شود. این ویژگی فاصله بین لبه پایینی عنصر و لبه پایینی عنصر محتوایی که درون آن قرار دارد را مشخص می‌کند.
با توجه به مقدار ویژگی position، تأثیر ویژگی bottom مشخص می‌شود.
مقدار موقعیت ویژگی bottom absolute یا fixed فاصله بین لبه پایینی مرز خارجی عنصر و لبه داخلی مرز پایینی محتوای محتوای کانتینر. relative فاصله که لبه پایینی عنصر بالاتر از موقعیت عادی خود حرکت می‌کند. sticky برای محاسبه مستطیل محدودیت‌های چسبنده استفاده می‌شود. static تأثیری بر عناصر ندارد. هنگامی که هر دو فاصله بالا و پایین مشخص شوند، همچنین هنگامی که هر دو مقدار بالا و پایین مشخص شوند، موقعیت به absolute یا fixed تنظیم می‌شود و ارتفاع یا ارتفاع‌خودکار 100٪ باشد.
مقدار بالا اولویت دارد و مقدار پایین نادیده گرفته می‌شود، هنگامی که ارتفاع محدود شده است یا موقعیت به relative تنظیم شده است.
مقادیر ممکن <length> – می‌تواند یک مقدار منفی، صفر یا مثبت باشد. <percentage> – درصد ارتفاع کانتینر. auto – مقدار پیش‌فرض. مرورگر موقعیت پایین را محاسبه می‌کند. اعمال بر روی تمام عناصر HTML موقعیت‌دار.
نحوه استفاده در DOM
object.style.bottom = "2px";With Absolute Position
این مثال از استفاده از ویژگی bottom در CSS با موقعیت مطلق (absolute) را نشان می‌دهد.
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: absolute;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:absolute bottom:10%</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “blockbottompostion” ایجاد شده است. این عنصر دارای موقعیت مطلق است (position: absolute) و موقعیت پایین (bottom) آن به صورت متغیر تنظیم شده است. ارزشی که برای bottom مشخص شده است یک مقدار درصدی است که به معنای فاصله از لبه پایینی عنصر نسبت به ارتفاع کل صفحه است.
به عبارت دیگر، عنصر با کلاس “blockbottompostion” در این مثال 10٪ از ارتفاع صفحه را به عنوان فاصله از لبه پایین صفحه دارد. این عنصر با رنگ زرد پس زمینه و ارتفاع 100 پیکسل و حاشیه 3 پیکسل از نوع solid و با رنگ تیره‌تر سایه ایجاد می‌کند.
With Relative Position
این مثال از استفاده از ویژگی bottom در CSS با موقعیت نسبی (relative) را نشان می‌دهد.
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: relative;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:relative bottom:10%</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “blockbottompostion” ایجاد شده است. این عنصر دارای موقعیت نسبی است (position: relative) و موقعیت پایین (bottom) آن به صورت متغیر تنظیم شده است. ارزشی که برای bottom مشخص شده است یک مقدار درصدی است که به معنای فاصله از لبه پایینی عنصر نسبت به ارتفاع خودش است.
بنابراین، عنصر با کلاس “blockbottompostion” در این مثال 10٪ از ارتفاع خودش را به عنوان فاصله از لبه پایین خودش دارد. این عنصر با رنگ زرد پس زمینه و ارتفاع 100 پیکسل و حاشیه 3 پیکسل از نوع solid و با رنگ تیره‌تر سایه ایجاد می‌کند.
With Fixed Position
این مثال نشان می‌دهد که چگونه با استفاده از موقعیت ثابت (position: fixed) و مقداردهی مختلف به ویژگی bottom، می‌توان ترتیب مختلفی از فاصله از لبه پایین مشخص کرد.
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: fixed;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:fixed bottom:10%</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “blockbottompostion” ایجاد شده است. این عنصر دارای موقعیت ثابت (position: fixed) است و موقعیت پایین (bottom) آن به صورت متغیر تنظیم شده است. مقداردهی شده برای bottom یک مقدار درصدی است که به معنای فاصله از لبه پایین مرورگر نسبت به ارتفاع نمایشگر می‌باشد.
بنابراین، عنصر با کلاس “blockbottompostion” در این مثال 10٪ از ارتفاع نمایشگر را به عنوان فاصله از لبه پایین مرورگر دارد. این عنصر با رنگ زرد پس زمینه و ارتفاع 100 پیکسل و حاشیه 3 پیکسل از نوع solid و با رنگ تیره‌تر سایه ایجاد می‌کند.
With Sticky Position
این مثال نشان می‌دهد که چگونه با استفاده از موقعیت چسبیده (position: sticky) و مقداردهی مختلف به ویژگی bottom، می‌توان ترتیب مختلفی از فاصله از لبه پایین مشخص کرد.
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: sticky;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:sticky bottom:10%</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “blockbottompostion” ایجاد شده است. این عنصر دارای موقعیت چسبیده (position: sticky) است و موقعیت پایین (bottom) آن به صورت متغیر تنظیم شده است. مقداردهی شده برای bottom یک مقدار درصدی است که به معنای فاصله از لبه پایین مرورگر نسبت به ارتفاع نمایشگر می‌باشد.
بنابراین، عنصر با کلاس “blockbottompostion” در این مثال 10٪ از ارتفاع نمایشگر را به عنوان فاصله از لبه پایین مرورگر دارد. این عنصر با رنگ زرد پس زمینه و ارتفاع 100 پیکسل و حاشیه 3 پیکسل از نوع solid و با رنگ تیره‌تر سایه ایجاد می‌کند.
With Static Position
این مثال نشان می‌دهد که در مواقعی که موقعیت عناصر به صورت استاتیک (position: static) تنظیم شده باشد، ویژگی bottom چه تأثیری دارد.
<html>
<head>
<style>
div.blockbottompostion {
bottom: 10%;
background-color: yellow;
position: static;
height: 100px;
border: 3px solid rgb(12, 5, 62);
}
</style>
</head>
<body>
<h1>The bottom Property</h1>
<p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
</p>
<p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
</p>
<div class="blockbottompostion">Position:static bottom:10%</div>
</body>
</html>در این مثال، یک عنصر div با کلاس “blockbottompostion” ایجاد شده است. این عنصر دارای موقعیت استاتیک (position: static) است و موقعیت پایین (bottom) آن به صورت متغیر تنظیم شده است. مقداردهی شده برای bottom یک مقدار درصدی است که به معنای فاصله از لبه پایین مرورگر نسبت به ارتفاع نمایشگر می‌باشد.
با توجه به اینکه موقعیت عنصر به صورت استاتیک تعیین شده است، هیچ تأثیری از ویژگی bottom بر موقعیت عمودی عنصر نخواهد داشت. به عبارت دیگر، موقعیت این عنصر به نحوی است که از جریان معمولی سند در جریان ترکیبی و نمایشگر صفحه می‌آید. بنابراین، هر تغییری که در bottom انجام شود، تأثیری در موقعیت عمودی عنصر ندارد و عنصر در موقعیت خود باقی می‌ماند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام