Разное

Расположение кнопки в html: HTML положение кнопки — CodeRoad

15.07.2021

Содержание

position | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

Версии CSS

Описание

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

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

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

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById(«elementID»).style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

background-position-x | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+1.0+1.0+

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

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа
ПрименяетсяКо всем элементам

Версии CSS

Описание

Задает положение фонового изображения внутри элемента по горизонтали. Свойство background-position-x является нестандартным и не входит в спецификацию CSS.

Синтаксис

background-position-x: left | center | right | <проценты> | <значение>

Значения

left
Выравнивает фон по левому краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right
Выравнивает фон по правому краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно левого края элемента.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-x</title>
  <style>
   body {
    background: #66806E url(images/clover.png) repeat-y;
    background-position-x: 95%; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Рис. 1. Положение фона, заданное в процентах

Объектная модель

[window.]document.getElementById(«elementID»).style.backgroundPositionX

background-position-y | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+1.0+1.0+

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

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа
ПрименяетсяКо всем элементам

Версии CSS

Описание

Задает положение фонового изображения внутри элемента по вертикали. Свойство background-position-y является нестандартным и не входит в спецификацию CSS.

Синтаксис

background-position-y: top | center | bottom | проценты | значение

Значения

top
Выравнивает фон по верхнему краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру вертикали. Эквивалент записи 50%.
bottom
Выравнивает фон по нижнему краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от высоты элемента. Значение 0% или 0 выравнивает верхний край фонового изображения по верхнему краю элемента. Значение 100% выравнивает нижний край рисунка по нижнему краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно верхнего края элемента.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-y</title>
  <style>
   html { 
    height: 100%; /* Высота страницы */ 
   }
   body {
    background: url(images/mybg.png) no-repeat; /* Параметры фона */
    background-position-y: bottom; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>.
 
 ..</p>
 </body>
</html>

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

Рис. 1. Положение фона по вертикали

Объектная модель

[window.]document.getElementById(«elementID»).style.backgroundPositionY

CSS позиционирование, обтекание элементов и контекст наложения

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

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

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

Схемы позиционирования

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с display block, list-item или table), строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right

.

Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed;.

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент

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

  • Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
  • Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
  • Содержащим блоком элемента с position: fixed; является окно просмотра.
  • Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
    — если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding;
    — если предок — элемент уровня строки, содержащим блоком будет область содержимого;
    — если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
  • Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

position
Значение:
staticБлок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются. Значение по умолчанию.
relativeПоложение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения.

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

Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

Влияние position: relative; на элементы таблицы определяется следующим образом:
Элементы с table-row-group, table-header-group, table-footer-group иd table-row смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки.
table-column-group, table-column не смещает соответствующий столбец и не оказывает визуального влияния.
table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.

absoluteПоложение блока (и, возможно, размер) задается с помощью свойств top, right, bottom и left. Эти свойства определяют явное смещение относительно его содержащего блока. Абсолютно позиционированные блоки полностью удаляется из нормального потока, не влияя на расположение сестринских элементов.

Отступы margin абсолютно позиционированных блоков не схлопываются.

Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с position: absolute;.

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

stickyПоложение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки.

«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.

«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.

fixedФиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения.

При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.

initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

Элемент считается позиционированным, если свойство position имеет значение, отличное от static. Позиционированные элементы генерируют позиционированные блоки и могут быть расположены в соответствии со следующими четырьмя физическими свойствами:

top
Значение:
autoВлияние значения зависит от типа элемента. Значение по умолчанию.
длинаСмещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;

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

right
Значение:
autoВлияние значения зависит от типа элемента. Значение по умолчанию.
длинаСмещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;

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

bottom
Значение:
autoВлияние значения зависит от типа элемента. Значение по умолчанию.
длинаСмещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;

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

left
Значение:
autoВлияние значения зависит от типа элемента. Значение по умолчанию.
длинаСмещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
%Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;

Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.

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

4. Обтекание: свойство float

Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

Правила, регулирующие поведение плавающих боков, описываются свойством float.

Свойство не наследуется.

float
Значение:
noneОтсутствие обтекания. Значение по умолчанию.
leftЭлемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
rightЭлемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

float: left;
float: right;
float: none;
float: inherit;

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

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

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. Значение inline-table меняет на table.

Свойство не оказывает влияние на элементы с display: flex и display: inline-flex. Не применяется к абсолютно позиционированным элементам.

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
noneОзначает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
leftСмещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
rightСмещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
bothСмещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;

Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;}.

6. Определение контекста наложения: свойство z-index

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

Рис. 3. Положение элементов вдоль оси Z

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

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

Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.

Свойство не наследуется.

z-index
Значение:
autoВычисляется в 0. Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию.
целое числоОпределяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
inheritНаследует значение свойства от родительского элемента.
initialУстанавливает значение свойства в значение по умолчанию.

Синтаксис

z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;
6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

  • Корневой элемент <html>, который содержит все элементы веб-странице.
  • Блочные элементы, неплавающие и непозиционированные.
  • Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
  • Строковые непозиционированные элементы (текст, изображения).
  • Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

  • Корневой элемент <html>, который содержит все элементы веб-странице.
  • Позиционированные элементы с отрицательным значением z-index.
  • Блочные элементы, неплавающие и непозиционированные.
  • Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
  • Строковые непозиционированные элементы (текст, изображения).
  • Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

html — Как сделать кнопку по центру?

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block. Ибо ему просто некуда двигаться. Размеры-то одинаковые.

Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block. Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.

.section > div {
  display: inline-block;
}

.button {
  text-align: center;
}

.button > a {
  color: #39739d;
  background-color: #E1ECF4;
  border: 1px solid #96bdd9; 
  padding: 5px; 
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f4f8fb;
  text-decoration: none;
}

.button > a:hover {
  background-color: #bcd4e6;
}
<div>
  <div>
    <h3>We are specialist in</h3>
    <h2>Responsive designs, Stationary<br>And wordpress Themes</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text.
    </p>
    <div>
      <a href="#">Button Name</a>
    </div>
  </div>
</div>

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

Введение в Chrome DevTools. Панель Elements — Блог HTML Academy

В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Как открыть инструменты разработчика

OS X — Ctrl+Cmd+I.

Windows — F12.

Linux — Ctrl+Shift+I.

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Расположение панелей

В правом верхнем углу находится кнопка, которая отвечает за расположение панелей. DevTools может находиться снизу, слева, справа, а ещё мы можем открепить отладчик и работать с ним в отдельном окне.

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header, и увидим все подходящие элементы:

Визуальный поиск. При открытом отладчике открываем режим визуального поиска, находим нужный элемент и кликаем по нему.

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

Любое правило можно отредактировать, а размеры элементов менять прямо в блоке с метрикой. Например, переопределим значение размера шрифта, и результат сразу появится на экране.

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style.

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

Начать обучение

Нажатие на кнопку — согласие на обработку персональных данных

где размещать кнопки призыва, чтобы повысить конверсию – Сей-Хай

Знаете ли вы, что расположение кнопок влияет на скорость выполнения пользователями своих задач? Если вы расположили кнопки призыва к действию там, где юзеры ждут их, то процесс работы ускоряется. А чем быстрее пользователи справляются с задачей, тем они довольнее.

Ниже мы предлагаем полный анализ размещения кнопок, которые вы можете использовать в мобильном приложении.

Принцип Гутенберга

Прежде чем что-то делать, пользователи должны отсканировать экран. Увиденное содержимое приводит их к решению о том, какое действие стоит предпринять. Поэтому призыв к действию должен появиться ровно там, где их глаза закончат сканирование экрана.

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

Глаз движется слева направо вдоль оси ориентации, пока не достигнет нижнего правого угла. Это формирует путь сканирования, называемый гравитацией. Элементы дизайна, которые лежат вдоль диагонали, получают наибольшее внимание. Элементы, лежащие снаружи, получают меньше.

Оптимальное расположение кнопок соответствует принципу Гутенберга. Вы должны поместить призыв в конце пути пользователя, когда он будет готов к решению. Конечно, бывают редкие случаи, когда пользователи готовы предпринять действия ещё до сканирования. Но это происходит только в том случае, когда они уже знакомы с содержимым экрана.

Верх против низа

Первое, что нужно решить, – расположить кнопку призыва к действию вверху или внизу экрана. Какое расположение кнопок соответствует принципу Гутенберга?

Большинство пользователей вначале сканируют контент, поскольку он относится к их задаче и доминирует на экране. Их глаза движутся от верхней половины экрана к нижней. Когда содержание заканчивается, они ищут призыв к действию.

Они ищут кнопку внизу и если её там нет, возвращаются к верхней части экрана.

Размещение кнопки призыва к действию вверху сбивает с толку пользователей, поскольку они ожидают увидеть ее после завершения сканирования содержимого. Нахождение кнопки вверху идет вразрез с их естественным потоком сканирования. Они сбиваются и не настраиваются на “завершение сканирования”.

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

Если вы поместите кнопку призыва к действию внизу, пользователи смогут быстрее к ней добраться. Они увидят кнопку сразу после сканирования контента. Эта кнопка не только соответствует принципу Гутенберга – она больше и ее легче нажать.

Выбор элемента

Единственная ситуация, когда расположение вверху уместно, – это когда пользователь выбирает элемент на экране. Например, когда пользователь выбирает строку таблицы, панель приложения изменяется и предоставляет соответствующие действия для выбранного элемента. Заголовок экрана исчезает – вместо него отображается количество выбранных элементов.

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

Горизонтальные кнопки

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

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

Поскольку покупка обуви и редактирование одинаково важны для удовлетворения потребностей клиентов, они объединены. Теперь, даже если клиенты торопятся, они не пропустят кнопку «Изменить внешний вид».

Основное действие: слева или справа

Если у вас две горизонтальные кнопки, вы можете разместить основное слева или справа. Но какой вариант позволяет пользователям действовать быстрее?

Когда основное действие слева, оно работает против гравитации (наш принцип Гутенберга). Глаза пользователя хотят двигаться вправо-вниз, но визуальный вес кнопки удерживает их в левом нижнем углу. После фиксации они перемещаются в правый нижний угол только для того, чтобы вернуться влево и нажать на главную кнопку.

Когда основное действие справа, результатом является более быстрое выполнение задачи, потому что кнопка находится там, где заканчивается гравитация. Пользователям не нужно менять направление сканирования или фиксировать основное действие больше одного раза.

Вертикальные кнопки

Еще один способ расположить кнопки – вертикальный. Такое расположение идеально, если вы хотите, чтобы пользователи фокусировались на каждом действии в отдельности. Они будут фиксироваться на каждой кнопке более тщательно.

Вертикальные кнопки более заметны, чем горизонтальные, потому что у них больше места. Больший размер не только облегчает нажатие на кнопки, но и делает основное действие заметнее.

В нашем примере основным действием является кнопка «Добавить в корзину», которая более важна, чем кнопка «Добавить сообщение». Расположение в виде вертикальной кнопки подчеркивает это.

Основное действие: сверху или снизу

Должно ли основное действие идти сверху или снизу? Принцип Гутенберга гласит, что гравитация чтения течет в нисходящем направлении. Нижняя кнопка позволяет пользователям быстрее добраться до нее – сразу после того, как они просканируют экран. Для верхней кнопки клиент всё равно должен дойти вниз, а потом подняться наверх.

Гибридные кнопки

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

Три кнопки требуют больше времени для принятия решения, потому что пользователю дают больше информации для обдумывания. Но гибридное расположение сокращает время  принятия решений благодаря визуальной иерархии. Вместо того, чтобы каждый раз читать надписи на кнопках, пользователи могут вспомнить каждое действие, посмотрев на размер кнопки и расположение.

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

Основное действие снизу

Гравитация диктует, что первичное действие идет внизу, а вторичное – выше. Кнопка с более высоким приоритетом требует наибольшего внимания и должна находиться в конце процесса сканирования пользователя.

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

Липкие кнопки

Использование “липких кнопок” позволяет сделать призыв к действию видимым для пользователей в любое время. Кнопки фиксируются в нижней части экрана, что позволяет выполнять действия в любом месте.

Используйте эти кнопки в нативных приложениях, но избегайте их в веб-приложениях на основе браузера. При нажатии на кнопку в браузере всплывает панель, которая сдвигает кнопку действия вверх.

Обходным путем может стать добавление отступа: ваша кнопка изначально должна быть выше всплывающей панели.

Плывите по течению

Кнопка призыва к действию – последний шаг пользователя к успеху. Правильное размещение может сделать жизнь клиента проще. Использование принципа Гутенберга поможет вам оптимизировать расположение в соответствии с движением юзера.

Источник: UX movement

Читайте также:

Почему кнопки отмены должны быть бесцветными

Шпаргалки UI дизайнера: дизайн деструктивных действий без потери данных

40 примеров дизайна мобильного приложения

CSS свойство позиции


Пример

Позиционируйте элемент

:

h3 {
позиция: абсолютная;
слева: 100 пикселей;
верх: 150 пикселей;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

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

Значение по умолчанию: статический
Унаследовано: №
Анимируемое: нет. Прочитать о animatable
Версия: CSS2
Синтаксис JavaScript: объект .style.position = «absolute» Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
позиция 1,0 7,0 1,0 1,0 4,0

Примечание. Прикрепленное значение не поддерживается в Internet Explorer или Edge 15 и более ранних версиях.

Синтаксис CSS

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

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

Значение Описание Играй
статический Значение по умолчанию.Элементы отображаются в том порядке, в котором они отображаются в потоке документов Играй »
абсолютное Элемент позиционируется относительно своего первого позиционированного (не статического) элемента-предка Играй »
фиксированная Элемент расположен относительно окна браузера Играй »
родственник Элемент позиционируется относительно своего нормального положения, поэтому "left: 20px" добавляет 20 пикселей к ЛЕВОЙ позиции элемента Играй »
липкий Элемент позиционируется в зависимости от положения прокрутки пользователя.

Липкий элемент переключается между относительно и фиксированным , в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте - затем он «застревает» на месте (например, position: fixed).

Примечание. Не поддерживается в IE / Edge 15 или более ранних версиях. Поддерживается в Safari с версии 6.1 с префиксом -webkit-.		 Попробуй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные Играй »
унаследовать Наследует это свойство от своего родительского элемента.Читать про наследство

Другие примеры

Пример

Как расположить элемент относительно его нормального положения:

h3.pos_left {
позиция: относительная;
слева: -20 пикселей;
}

h3.pos_right {
позиция: относительная;
слева: 20 пикселей;
}

Попробуй сам "

Пример

Больше позиционирования:

# parent1 {
position: static;
граница: сплошной синий 1px;
ширина: 300 пикселей;
высота: 100 пикселей;
}

# child1 {
позиция: абсолютный;
граница: сплошной красный 1px;
верх: 70 пикселей;
справа: 15 пикселей;
}

# parent2 {
положение: относительное;
граница: сплошной синий 1px;
ширина: 300 пикселей;
высота: 100 пикселей;
}

# child2 {
позиция: абсолютная;
граница: сплошной красный 1px;
верх: 70 пикселей;
справа: 15 пикселей;
}

Попробуй сам "

Связанные страницы

Учебник

CSS: позиционирование CSS

Ссылка

HTML DOM: позиция собственности



Как разместить кнопку на веб-сайте с помощью html / css

Как разместить кнопку на веб-сайте с помощью html / css - qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 2k раз

РЕДАКТИРОВАТЬ: фон - это просто изображение, а раздел, в который я помещаю изображение, - это тот, который я дал

Моя веб-страница в настоящее время выглядит так, и я указал, где мне нужна кнопка, однако я новичок в кодировании в целом и не уверен, как этого добиться.

Изображение страницы сайта:

Это мой html-код, очень простой, просто нужно добавить кнопку

  <раздел>
  

    

      
 

            
          
 

      

        

           Беспорядки вызывают воспоминания   ->

Создан 22 авг.

1

ну попробуй вот этот код

  
   
     
       <стиль>

       .img {
       ширина: 100%;
       высота: авто;
       верх: 0;
       слева: 0;
       положение: относительное;
       z-индекс: 1;
       }

       .anybutton {
       верх: 11%;
       осталось: 55%;
       ширина: 100 пикселей;
       высота: 40 пикселей;
       позиция: абсолютная;
       z-индекс: 2;
       фон: оранжевый;
       }

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

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