top в CSS


С мещение элементов в CSS

С войства BOTTOM, LEFT, RIGHT, TOP

Свойство Значения Пр* Нc*
bottom
left
right
top
ДЛИНА, %, auto , inherit *

Эти свойства определяют смещение между внешним краем позиционированного элемента и краем его родительского элемента: Top — от верхнего края, Bottom — от нижнего, Left и Right — от левого и правого. Если родитель у элемента отсутствует, то началом отсчёта служат границы окошка браузеров.

Область применения *: позиционированные элементы, для которых значение свойства Position отлично от static.

.element < position: absolute; top: 50px; right: 50px; height: 70px; width: 70px; border: 2px solid #000;>
.element < position: absolute; top: 50%; right: 50%; height: 70px; width: 70px; border: 2px solid #000;>
— в первом примере смещение задано в пикселах;
— во втором — в процентах, где высота элемента ровно в два раза меньше высоты родителя, выступ произошёл из-за ширины рамки, а в принципе можно чётко поместить элемент в один из углов родительского блока:

Смещение элементов при абсолютном и относительном
позиционировании

В зависимости от значения свойства Position смещение элемента может быть неодинаково. При абсолютном позиционировании он смещается относительно границ родительского элемента, при относительном позиционировании, смещение происходит относительно нормального потока на заданные величины.

.element < position: absolute; bottom: 30px; left: 30px; height: 70px; width: 70px; border: 2px solid #000;>
— для элемента задано абсолютное позиционирование; в примере на второй картинке — всё то же самое, только позиционирование относительное, т.е. свойство Position со значением relative:

Используются принятые в CSS единицы, отрицательные значения смещают элемент наружу. Для относительно позиционированных элементов значение свойства Left всегда равно значению свойства Right, но с противоположным знаком. Для элементов static значение всегда будет auto, т.е. ноль.

% — относительно высоты или ширины родительского элемента.
auto — если Bottom и Top имеют значение auto — то это для обоих будет 0; если одно из них auto — то оно принимает значение другого, но с противоположным знаком; если значение Top задано — то значение Bottom будет auto, т.е. ноль. Значения тестировались в браузере Сhrome.
inherit — наследование от родительского элемента.

Top в CSS

Свойство CSS top используется для указания расстояния смещения вниз (или вверх) верхнего края позиционируемого элемента относительно верхнего внутреннего края рамки (CSS border) одного из его элементов-предков или окна браузера (абсолютное позиционирование) либо относительно начального положения верхнего края самого элемента (относительное позиционирование). Это зависит от значения свойства position как самого элемента, так и его предков.

HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

Тип свойства

Применяется: к позиционируемым элементам, то есть тем, у которых свойство CSS position имеет значения absolute , fixed или relative .

Значения


Значением свойства CSS top является указание расстояния одним из следующих способов:

  • Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
    1. Для относительно позиционируемых элементов (relative) берется высота ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то высота тела документа (тег ).
    2. Для фиксированных абсолютно позиционированных элементов (fixed) берется высота окна браузера.
    3. Для абсолютно позиционированных элементов (absolute) берется высота элемента относительно которого происходит позиционирование с учетом его внутренних отступов (CSS padding), а если такого нет, то высота окна браузера.

    Разрешено указывать отрицательные процентные значения (-20%).

  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них также разрешены отрицательные значения.
  • auto — положение верхнего края элемента по вертикали, как без применения позиционирования.
  • inherit — наследует значение CSS top от родительского элемента.

Процентная запись: исходя из высоты элемента, относительно которого происходит позиционирование, или окна браузера.

Значение по умолчанию: auto.

Синтаксис

Пример CSS: использование top

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit . Internet Explorer 6.0 не изменяет размеры позиционируемого блока при одновременном указании свойств CSS top и bottom или left и right, когда размеры блока не заданы явно.

CSS стиль top

Определяет для позиционируемого блока расстояние от верхнего края блока до верхнего края родителя, не включая отступ, поле и высоту рамки. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
7 1 5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Отсчет координат зависит от значения свойства position. Если оно равно absolute , в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края.

Значение свойства top относительно окна браузера

В случае значения relative , отсчет идет от верхнего края исходного положения элемента. Если для родительского элемента задано CSS свойство position: relative , то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя.


Значение свойства top относительно родителя

Краткая информация по CSS-свойству top

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства top

В качестве значений размера принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть как положительным, так и отрицательным. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

Top в CSS

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position . Если его аргумент равен absolute , в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative , аргумент top отсчитывается от верхнего края исходного положения элемента.

Рис. 1. Значение параметра top

Синтаксис

top: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS (ЦСС) — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 2.

Свойство CSS top

Описание и использование


Свойство CSS top действует для абсолютно позиционированных элементов и устанавливает расстояние между верхней границей элемента и верхней границей его родителя. В случае, если элемент не вложен в другой элемент, родителем считается body.

Для относительно позиционированных элементов, свойство top задает расстояние между верхней границей элемента и положением верхней границы элемента при обычном позиционировании (static).

Заметка: Если позиция элемента задана «static», свойство top не оказывает никакого эффекта.

Значение по умолчанию авто
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.top=»50px»

Поддержка в браузерах

Свойство top поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS Свойство top

Пример

Сдвинуть верхний край изображения на 5px вниз от верхнего края элемента, его содержащего:

img
<
position:absolute;
top:5px;
>

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

Определение и Использование

Для абсолютно позиционированных элементов свойство top сдвигает верхний край элемента на указанную величину вверх/вниз от верхнего края элемента, его содержащего.

Для относительно позиционированных элементов, свойство top сдвигает верхний край элемента на указанную величину вверх/вниз относительно его обычного положения.

Замечание: При «position:static», свойство top не действует.

Значение по умолчанию: auto
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.top=»50px»

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


Свойство top поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

CSS top Property

Example

Set the top edge of the positioned

More «Try it Yourself» examples below.

Definition and Usage

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; — the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
  • If position: relative; — the top property makes the element’s top edge to move above/below its normal position.
  • If position: sticky; — the top property behaves like its position is relative when the element is ins >top property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.top=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
top 1.0 5.0 1.0 1.0 6.0

CSS Syntax

Property Values

Value Description Play it
auto Lets the browser calculate the top edge position. This is default Play it »
length Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units Play it »
% Sets the top edge position in % of containing element. Negative values are allowed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


More Examples

Example

Use the top property with a negative value and for an element with no positioned ancestors:

div.b <
position: absolute;
top: -20px;
border: 3px solid blue;
>

div.c <
position: absolute;
top: 150px;
border: 3px solid green;
>

Свойства top, left, bottom, right

Как вы знаете, в браузере есть область просмотра — это та его часть, в которой отображается веб-страница. У данной области есть четыре стороны — верхняя, левая, нижняя и правая. И в CSS для каждой из этих сторон существует соответствующее свойство: top , left , bottom и right .

С помощью данных свойств вы можете задавать расстояние между позиционированным элементом и:

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

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

В качестве значений принимаются любые единицы измерения длины в CSS. Например, вы можете установить расстояние между позиционированным элементом и сторонами браузера в размере 5% от левого края окна браузера и 40px от верхнего края окна браузера. Если расстояние задано в процентах, оно вычисляется, исходя из ширины/высоты родительского элемента. Также принимаются и отрицательные значения.

Помимо этого, можно установить значение auto (к слову, оно задано по умолчанию) и тем самым перезаписать предыдущие настройки. Обратите внимание, что значения 0 и auto не равны между собой и действуют по-разному.

Кратко рассмотрим каждое свойство:

  • top — задает расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вниз относительно его точки отсчета. При отрицательном значении элемент смещается вверх.
  • left — задает расстояние от левого края родительского элемента до левого края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вправо относительно его точки отсчета. При отрицательном значении элемент смещается влево.
  • bottom — задает расстояние от нижнего края родительского элемента до нижнего края дочернего элемента. Если значение положительное, позиционируемый элемент смещается вверх относительно его точки отсчета. При отрицательном значении элемент смещается вниз.
  • right — задает расстояние от правого края родительского элемента до правого края дочернего элемента. Если значение положительное, позиционируемый элемент смещается влево относительно его точки отсчета. При отрицательном значении элемент смещается вправо.


Взгляните на серию примеров ниже, чтобы лучше понять, как ведет себя позиционированный элемент, когда к нему применяются вышеописанные свойства с различными значениями:

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

Далее в учебнике: свойство z-index — расположение позиционированных элементов по оси Z.

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : top

Материал из WebWikiABCD

Содержание

Атрибут top | Свойство top

Задает верхнюю позицию объекта, то есть расстояние от верхнего края элемента до верхнего края его родительского объекта.

Синтаксис

HTML
Скрипты [ sPosition = ] object.style.top

Используемые значения

sPosition Строка, которая может определять и принимать от одно из следующих значений:

auto Значение по умолчанию. Позиция элемента определяется по умолчанию в зависимости от разметки страницы. length Задается вещественным числом, выраженным в абсолютных (cm, mm, in, pt или pc) или относительных (em, ex или px) единицах измерения. percentage Числовое значение, выраженное в процентах (%). Процентное отношение высчитывается от ширины родительского объекта.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Вы можете использовать атрибут top только тогда, когда задан атрибут position. Иначе, значение атрибута top проигнорируется.

Значение свойства top является строковым, поэтому его нельзя использовать в вычислениях. Вместо него применяйте значения свойств pixelTop или posTop.

В качестве родительского элемента для объекта может выступать окно браузера.


Примеры

В следующих примерах используются атрибут top и свойство top для изменения расположения объекта.

В первом примере задается позиция объекта div.

Во втором примере с помощью скрипта изменяется расположение рисунка на странице, когда происходят события onmouseover и onmouseout (соответственно, наведение курсора мыши на объект и перемещение курсора мыши за границы текущего объекта).

Стандарты

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

Internet Explorer 5.5, 6.0, 7.0, 8.0

CSS стиль top

Определяет для позиционируемого блока расстояние от верхнего края блока до верхнего края родителя, не включая отступ, поле и высоту рамки. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
7 1 5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Отсчет координат зависит от значения свойства position. Если оно равно absolute , в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края.

Значение свойства top относительно окна браузера

В случае значения relative , отсчет идет от верхнего края исходного положения элемента. Если для родительского элемента задано CSS свойство position: relative , то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя.

Значение свойства top относительно родителя

Краткая информация по CSS-свойству top

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства top

В качестве значений размера принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть как положительным, так и отрицательным. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

Илон Маск рекомендует:  Как вставить символ рубля в Word
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL