ویژگی bottom در CSS

bottom Property

ویژگی bottom در CSS موقعیت عنصر در راستای عمودی را مشخص می کند. این تاثیر بشرطی انجام می پذیرد که ویژگی position در عنصر تعیین شده باشد.

چگونگی تاثیر مقدار bottom به این بستگی دارد که ویژگی position چه مقداری پذیرفته باشد.

• اگر مقدار position برابر با fixed یا absolute باشد، ویژگی bottom فاصله بین لبه پایینی عنصر و لبه پایینیِ عنصر ظرف یا در برگیرنده (container) را مشخص می کند.
• اگر مقدار position برابر با relative باشد، ویژگی bottom فاصله لبه پایینیِ عنصر حرکت داده شده با مکان پیشفرض آن را مشخص می کند.
• اگر مقدار position برابر با static باشد، ویژگی bottom اثری نخواهد داشت.

نحوه نوشتار

bottom: auto;
bottom: unset;
bottom: 10px;
bottom: 1.5rem;
bottom: 50%;

مقادیر

auto​

اجازه می دهد که مرورگر مقعیت عنصر را بر حسب لبه پایینی محاسبه کند.

length​

موقعیت عنصر بر حسب لبه پایینی را در واحد های px ,em ,cm مشخص می کند.

%​

موقعیت لبه پایینی را بر حسب درصد در عنصر در نگهدارنده یا ظرف مشخض می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم. با اسکرول کردن پنجره مشاهده می کنیم که چون مقدار position در box2. برابر با fixed است، به گوشه پایین و سمت چپ پنجره چسبیده است.
در عنصر box3. چون مقدار ویژگی position برابر relative است، مبنای موقعیت عنصر، موقعیت فعلی آن در حالت پیشفرض است، پس تغییری نمی کند.

html

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

css

body {
   height: 700px;
}
div {
   padding: 50px;
   background-color: dodgerblue;
   display: inline-block;
   float: left;
   margin-left: 15px;
   color: #ffffff;
}
.box1 {
   bottom: 0px;
   position: absolute;
}
.box2 {
   bottom: 0px;
   position: fixed;
   right: 110px;
}
.box3 {
   bottom: 0px;
   position: relative;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.