bottom

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS2
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visuren.html#propdef - bottom

Опис

Встановлює положення нижнього краю утримуваного елементу без урахування товщини рамок і відступів. Відлік координат залежить від властивості position, воно зазвичай набуває значення relative (відносне положення) або absolute (абсолютне положення).

При відносному позиціонуванні елементу, відлік ведеться від нижнього краю початкового положення елементу (мал. 1), а при абсолютному - відносно нижнього краю вікна документу (мал. 2). Якщо для батьківського елементу задане position: relative, то абсолютне позиціонування дочірніх елементів визначає їх положення від нижнього краю батька.

Мал. 1. Значення bottom при відносному позиціонування елементу

Мал. 2. Значення bottom при абсолютному позиціонування елементу

Якщо одночасно задана властивість top і bottom зі значеннями відмінними від auto, то властивість bottom ігнорується.

Синтаксис

bottom: значення | відсотки | auto | inherit

Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елементу обчислюється залежно від висоти батьківського елементу.

auto Не змінює положення елементу.

inherit Наслідує значення батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>bottom</title>

<style type="text/css">

# #layer {

bottom: 20px; /* Відстань від нижнього краю вікна браузеру */

position: absolute; /* Абсолютне позиціонування */

background: #f0f0f0; /* Колір фону */

padding: 7px; /* Полів навколо тексту */

border: solid 1px black; /* Параметрів рамки */

}

</style>

</head>

<body>

<div id="layer">

Луцький національний технічний університет є одним із найкращих професійних закладів освіти у місті Луцьку. </div>

</body>

</html>

Результат цього прикладу показаний ні мал. 3.

Мал. 3. Застосування властивості bottom

Об'єктна модель

[window.]document.getElementById("elementID").style.bottom

Браузери

У браузері Internet Explorer 6 для елементів, що абсолютно позиціонуються, не можна одночасно задати властивості top, left, right, bottom.

Internet Explorer до сьомої версії включно не підтримує значення inherit.