Bottom css: bottom | CSS | WebReference

Leave a Comment / Css / By /

Свойство bottom | CSS справочник

CSS свойства

Определение и применение

CSS свойство bottom определяет смещение позиционированного элемента относительно нижнего края.

Результат применения свойства bottom напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position:

  1. position: relative; (элемент с относительным позиционированием) — при использовании свойства bottom элемент смещается вверх или вниз относительно его текущей позиции (отрицательное значение смещает вниз, положительное вверх). На примере bottom: -25px;
  2. position: absolute; (элемент с абсолютным позиционированием) — при использовании свойства bottom смещается вверх или вниз относительно нижнего края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию — static, иначе отсчёт будет вестись относительно нижнего края окна браузера (как при position: fixed;). На примере bottom: 100px;
  3. position: fixed;(элемент с фиксированным позиционированием) — при использовании свойства bottom элемент смещается вверх или вниз относительно нижнего края окна браузера. На примере bottom: 25px;
  4. position: static; (элемент со статическим позиционированием — по умолчанию) — значение свойства bottom не повлияют на позиционирование элемента.

Поддержка браузерами

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
bottom1.01.06.01.05.012.0

CSS синтаксис:

bottom:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.bottom = "5%"

Значения свойства

ЗначениеОписание
autoПозволяет браузеру вычислять положение от нижнего края.
Это значение по умолчанию.
lengthОпределяет величину смещения (px, em, pt, и т.п.). Допускается использование отрицательных значений.
%Величина смещения, указанная в процентах от содержащего элемента. Допускается использование отрицательных значений.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство bottom.</title>
<style> 
body {
background-color:khaki; /* задаём задний фон цвета хаки */
}
.relative { 
position:relative; /* элемент с относительным позиционированием */
bottom : -25px; * задаём смещение элемента вниз относительно его текущей позиции */
width 200px; /* задаём ширину блока */
height: 250px; /* задаём высоту блока */
border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */
background-color:orange; /* задаём задний фон оранжевого цвета */
}

 
. absolute {
position:absolute; /* элемент с абсолютным позиционированием */
bottom : 100px; * задаём смещение элемента вниз относительно нижнего края его предка */
width 150px; /* задаём ширину блока */
height: 100px; /* задаём высоту блока */
border 5px solid green; /* задаём стиль для границ сплошной, ширину 5px и цвет зелёный */
}
.fixed {
position:fixed; /* элемент с фиксированным позиционированием */
bottom : 25px; * задаём смещение элемента вниз относительно нижнего края окна браузера */
width 150px; /* задаём ширину блока */
height: 100px; /* задаём высоту блока */
border 5px solid red; /* задаём стиль для границ сплошной, ширину 5px и цвет красный */
}
</style>
</head>
	<body>
		<div class = "relative">div position:relative;</div>
		<div class = "absolute">div position:absolute;</div>
		<div class = "fixed">div position:fixed;</div>
	</body>
</html>
Пример смещения позиционированного элемента.CSS свойства

CSS свойство bottom

❮ Назад Вперед ❯

CSS свойство bottom устанавливает положение элемента совместно со свойством position.

Если элементы статичны, то это считается состоянием по умолчанию. В данном случае свойство bottom не имеет эффекта. Когда позиционирование элемента установлена на «relative», «absolute», «fixed», или «sticky», значение bottom играет большую роль. Если позиция установлена на «fixed», при прокручивании элемент на экране остается фиксированным. Если позиция установлена на «absolute», отсчет ведется относительно нижнего края блока. Если позиция установлена на «relative», элемент перемещается вверх или вниз относительно его текущей позиции. Если позиция установлена на «sticky», позиция элемента будет относительна, когда элемент находится в окне просмотра и, так же как и позиция, фиксирована, когда находится вне него.

bottom: auto | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
      position: relative;
      height: 300px;
      width: 80%;
      border: 3px solid #8ebf42;
      }
      div.
  absolute {
      position: absolute;
      width: 50%;
      bottom: 10px;
      border: 3px solid #8ebf42;
      } 
    </style>
  </head>
  <body>
    <h3>Пример свойства bottom</h3>
    <div>
      Позиция данного div элемента установлена на relative.
      <div>Нижний край данного div элемента расположена на расстоянии 10 px сверху от нижнего края, который содержит элемент, и позиция установлена на absolute. </div>
    </div>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример со всеми позициями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
      position: relative;
      height: 180px;
      border: 3px solid #8AC007;
      }
      div.absolute {
      position: absolute;
      width: 50%;
      bottom: 20px;
      border: 3px solid #8AC007;
      } 
      div.
 
 
 relative {
      position: relative;
      width: 50%;
      bottom: 2px;
      border: 3px solid #8AC007;
      } 
      div.fixed {
      position: fixed;
      width: 50%;
      bottom: 50px;
      border: 3px solid #8AC007;
      } 
      div.sticky {
      position: sticky;
      width: 50%;
      bottom: 10px;
      border: 3px solid #8AC007;
      } 
    </style>
  </head>
  <body>
    <h3>Пример свойства bottom</h3>
    <div>
      Данный div элемент имеет позицию relative.
      <div><strong>position: absolute and bottom 20px</strong><br>Нижний край этого div элемента расположена на расстоянии 20 px сверху от нижнего края, который содержит элемент.</div>
    </div>
    <br>
    <div>
      Данный div элемент имеет позицию relative.
      <div><strong>position: relative and bottom 2px</strong><br>Нижний край этого div элемента расположена на расстоянии 2 px сверху от нормальной позиции.
  </div>
    </div>
    <br>
    <div><strong>position: fixed and bottom 50px</strong><br>Нижний край этого div элемента расположена на расстоянии 50 px снизу от окна просмотра.</div>
    <div>
      Данный div элемент имеет позицию relative.
      <div><strong>position: sticky and bottom 10px</strong><br>This div is sticky.</div>
    </div>
  </body>
</html>

Попробуйте сами!

Нижнее свойство CSS — javatpoint

следующий → ← предыдущая

Свойство bottom в CSS используется для указания нижнего положения вертикально расположенных элементов. Это не влияет на непозиционированные элементы. Это одно из четырех свойств смещения: влево, вправо, и сверху .

Действие этого свойства зависит от позиции соответствующего элемента, т. е. значения позиции свойство. Свойство bottom не влияет, если для свойства position задано значение static .

Синтаксис

внизу: авто | длина | процент | начальная | наследовать;

Значения свойств

Значения этого свойства определяются следующим образом:

авто: Это значение по умолчанию. Это позволяет браузеру вычислить позицию нижнего края.

длина: Это значение определяет положение свойства bottom в px, cm, pt и т. д. Оно допускает отрицательные значения.

процент: Это значение определяет позицию нижнего свойства в процентах (%). Он вычисляется по высоте блока, содержащего элемент. Он также допускает отрицательные значения.

начальный: Устанавливает для свойства значение по умолчанию.

inherit: Наследует свойство родительского элемента.

Эффекты этого свойства на позиционированных элементах, отличных от значения static , перечислены ниже:

  • Когда элемент зафиксирован или абсолютно позиционирован (т. е. позиция
    : фиксированная; позиция     и : абсолютная; ), свойство bottom определяет расстояние между нижним краем элемента и нижним краем содержащего его блока ( предок, относительно которого расположен элемент).
  • Если элемент расположен относительно друг друга (т. е. положение: относительное; ), свойство bottom перемещает верхний край элемента вверх/вниз от его нормального положения.
  • Если позиция установлена ​​на липкая , т. е. позиция : липкая; , тогда контекстом позиционирования является область просмотра. Когда элемент находится внутри окна просмотра, свойство bottom ведет себя так, как будто его положение относительно. Когда элемент находится снаружи, свойство bottom ведет себя так, как будто его положение фиксировано.

Теперь давайте разберемся с этим свойством на нескольких примерах.

Пример

В этом примере есть четыре абсолютно позиционированных элемента div. Мы применяем к ним свойство bottom . Элементы div с нижним краем : initial; и снизу: авто; будут перекрываться из-за схожих размеров и значений по умолчанию.

Здесь длина свойства bottom определена в px и em .

<голова> <название> CSS нижнее свойство <стиль> дел { положение: абсолютное; ширина: 150 пикселей; высота: 150 пикселей; размер шрифта: 30px; } #лен { внизу: 200 пикселей; граница: 5px сплошной зеленый цвет; } #эм { внизу: 1см; граница: 5 пикселей сплошного синего цвета; } #авто { внизу: авто; граница: 5 пикселей сплошного красного цвета; } #в этом { внизу: инициал; граница: 5px сплошной темно-фиолетовый; } h2{ выравнивание текста: по центру; } <тело>

Пример нижнего свойства

внизу: 200 пикселей;
снизу: 1em;
внизу: авто;
нижний: начальный;

Протестируйте сейчас

Выход

Пример — использование отрицательных значений

В этом примере есть четыре относительно расположенных элемента div. Мы применяем к ним свойство bottom с отрицательными значениями. Здесь отрицательные значения длины свойства bottom определены в px и em .

<голова> <название> CSS нижнее свойство <стиль> дел { положение: родственник; ширина: 150 пикселей; высота: 150 пикселей; размер шрифта: 30px; } #лен { внизу: -150px; граница: 5px сплошной зеленый цвет; } #эм { низ: -17см; граница: 5 пикселей сплошного синего цвета; } #авто { внизу: авто; граница: 5 пикселей сплошного красного цвета; } #в этом { внизу: инициал; граница: 5px сплошной темно-фиолетовый; } h2{ выравнивание текста: по центру; } <тело>

Пример нижнего свойства

снизу: -150px;
нижняя часть: -17em;
внизу: авто;
нижний: начальный;

Протестируйте сейчас

Выход

Next TopicCSS top property

← предыдущая следующий →

Нижний CSS не работает для P с примерами кода

Нижний CSS не работает для P с примерами кода

Используя язык программирования, мы будем работать вместе, чтобы решить головоломку Bottom Css Don’t Work For P на этом уроке. Это демонстрируется в следующем коде.

 р {
  положение: абсолютное;
  Топ 10%;
  красный цвет;
}

Как мы видели, проблема с нижней Css, которая не работает для P, была решена с использованием нескольких различных экземпляров.

Что делает дно CSS?

Свойство CSS bottom участвует в установке вертикального положения позиционируемого элемента. Это не влияет на непозиционированные элементы.26 сентября 2022 г.

Как поместить что-то внизу в CSS?

Чтобы поместить элемент в нижнюю часть контейнера с помощью CSS, необходимо использовать следующие свойства и значения: position: relative; (родительская) позиция: абсолютная; (дочерний) нижний: 0; (ребенок)29-декабрь 2020 г.

Как сделать нижний элемент div в CSS?

Установить положение div в нижней части его контейнера можно с помощью свойства bottom и position. Установите абсолютное значение позиции и нулевое нижнее значение, чтобы поместить элемент div в нижнюю часть контейнера. 10 мая 2022 г.

Что такое CSS нижней границы?

Сокращенное свойство CSS border-bottom устанавливает нижнюю границу элемента. Он устанавливает значения border-bottom-width , border-bottom-style и border-bottom-color .10-Jul-2022

Читается ли CSS сверху вниз?

Распространено мнение, что CSS анализируется слева направо так же, как мы читаем по-английски. На самом деле браузеры используют синтаксический анализ снизу вверх для повышения эффективности, что на простом языке означает, что ваши селекторы читаются справа налево. 22 марта 2011 г.

Что такое верхний левый нижний в CSS?

CSS-свойство position определяет положение элемента в документе. Свойства top , right , bottom и left определяют окончательное расположение позиционируемых элементов.26 сентября 2022 г.

Как поместить текст в конец HTML?

«html разместить элемент внизу страницы» Код ответа

  • нижний колонтитул {
  • позиция: фиксированная;
  • низ: 0;
  • }

Как переместить текст сверху вниз в CSS?

«переместить текст вниз css» Код ответа

  • .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *