Html position relative height 100

Особенности свойства height в %

Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.

Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!

Чтобы лучше понимать ситуацию, рассмотрим пример.

Пример

Наша цель – получить вёрстку такого вида:

При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:

Как это реализовать? Подумайте перед тем, как читать дальше…

Придумали. Если да – продолжаем.

Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.

Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …

Демо height:100% + float:left

.container < border: 1px solid black; >.content < /* margin-left нужен, так как слева от содержимого будет стрелка */ margin-left: 35px; >.toggler < /* Зададим размеры блока со стрелкой */ height: 100%; width: 30px; float: left; background: #EEE url("arrow_left.png") center center no-repeat; border-right: #AAA 1px solid; cursor: pointer; >

А теперь – посмотрим этот вариант в действии:

Как видно, блок со стрелкой вообще исчез! Куда же он подевался?

Ответ нам даст спецификация CSS 2.1 пункт 10.5.

«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»

В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .

Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.

Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.

Источник

Как работает CSS Position — объяснение с примерами кода

Сегодня мы узнаем все, что вам нужно знать о свойстве CSS Position. Объясняем всё на наглядных примерах с кодом.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое свойство Position в CSS

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

Используя Flexbox или Grid, вы можете сделать симметричный сайт, к примеру, как этот:

Используя свойство Position, вы можете сделать асимметричный сайт, как этот:

Дело в том, что с помощью Flexbox и Grid вы не можете разместить содержимое сайта в любом месте. Вы ограничены осями X и Y.

Посмотрите на этот рисунок, чтобы понять, что имеется в виду:

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

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

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

Вот еще один пример сайта, который вы можете сделать, используя свойство Position:

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

Настройка проекта

Для этого проекта вы можете использовать любой редактор кода, в котором установлен плагин emmet. Я собираюсь использовать CodePen.io.

HTML

Внутри тега body напишите этот код:

CSS

Очистите настройки браузера по умолчанию и добавьте этот CSS:

Стилизацию класса box-1 сделаем такой:

Свойство position, которое мы будем изучать, имеет 5 значений:

Чтобы переместить наш блок, мы будем использовать 4 параметра:

Что такое Static Position в CSS

Static не имеет никакого применения. Static — это значение по умолчанию для каждого блока.

Что такое Relative и Absolute Positions в CSS

И Relative, и Absolute работают одинаково, разница между ними заключается только в использовании классов.

Relative используется только для родительских классов.

Absolute используется только для дочерних классов.

Давайте рассмотрим два примера, чтобы понять разницу.

Сперва поэкспериментируем с Relative. Напишите этот код:

Вот результат, который вы получите:

Мы можем повторить тот же результат, используя значение Absolute следующим образом:

В чём же тогда основное различие?

Запишите этот код внутри вашего HTML:

Стилизуйте поля с помощью этого CSS-кода:

Результат должен выглядеть следующим образом:

Теперь выделим наши классы:

Обратите внимание, что теперь .box-2 переместился на 100px относительно .box-1 .

Это потому, что .box-1 является родительским блоком, а .box-2 — дочерним.

Давайте поэкспериментируем ещё немного. Запишите этот код в свой CSS, убрав свойство position из .box-1 и добавив его в body :

Обратите внимание, что .box-2 переместился на 100px от элемента body .

Это произошло потому, что теперь body является родительским элементом, а .box-2 — дочерним.

Что такое Fixed Position в CSS

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

Запишите этот код в HTML. Как только вы напишете lorem200, не забудьте нажать клавишу Tab на клавиатуре:

Затем добавьте этот CSS в нижней части:

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

Что такое Sticky Position в CSS

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

Не меняйте ничего в ваших текущих HTML и CSS, кроме этого единственного значения:

Вот, что должно получиться:

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

Заключение

Теперь вы можете уверенно создавать красивые сайты и решать простые проблемы верстки с помощью свойства position.

Источник

Как работает CSS Position — объяснение с примерами кода

Сегодня мы узнаем все, что вам нужно знать о свойстве CSS Position. Объясняем всё на наглядных примерах с кодом.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое свойство Position в CSS

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

Используя Flexbox или Grid, вы можете сделать симметричный сайт, к примеру, как этот:

Используя свойство Position, вы можете сделать асимметричный сайт, как этот:

Дело в том, что с помощью Flexbox и Grid вы не можете разместить содержимое сайта в любом месте. Вы ограничены осями X и Y.

Посмотрите на этот рисунок, чтобы понять, что имеется в виду:

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

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

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

Вот еще один пример сайта, который вы можете сделать, используя свойство Position:

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

Настройка проекта

Для этого проекта вы можете использовать любой редактор кода, в котором установлен плагин emmet. Я собираюсь использовать CodePen.io.

HTML

Внутри тега body напишите этот код:

CSS

Очистите настройки браузера по умолчанию и добавьте этот CSS:

Стилизацию класса box-1 сделаем такой:

Свойство position, которое мы будем изучать, имеет 5 значений:

Чтобы переместить наш блок, мы будем использовать 4 параметра:

Что такое Static Position в CSS

Static не имеет никакого применения. Static — это значение по умолчанию для каждого блока.

Что такое Relative и Absolute Positions в CSS

И Relative, и Absolute работают одинаково, разница между ними заключается только в использовании классов.

Relative используется только для родительских классов.

Absolute используется только для дочерних классов.

Давайте рассмотрим два примера, чтобы понять разницу.

Сперва поэкспериментируем с Relative. Напишите этот код:

Вот результат, который вы получите:

Мы можем повторить тот же результат, используя значение Absolute следующим образом:

В чём же тогда основное различие?

Запишите этот код внутри вашего HTML:

Стилизуйте поля с помощью этого CSS-кода:

Результат должен выглядеть следующим образом:

Теперь выделим наши классы:

Обратите внимание, что теперь .box-2 переместился на 100px относительно .box-1 .

Это потому, что .box-1 является родительским блоком, а .box-2 — дочерним.

Давайте поэкспериментируем ещё немного. Запишите этот код в свой CSS, убрав свойство position из .box-1 и добавив его в body :

Обратите внимание, что .box-2 переместился на 100px от элемента body .

Это произошло потому, что теперь body является родительским элементом, а .box-2 — дочерним.

Что такое Fixed Position в CSS

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

Запишите этот код в HTML. Как только вы напишете lorem200, не забудьте нажать клавишу Tab на клавиатуре:

Затем добавьте этот CSS в нижней части:

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

Что такое Sticky Position в CSS

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

Не меняйте ничего в ваших текущих HTML и CSS, кроме этого единственного значения:

Вот, что должно получиться:

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

Заключение

Теперь вы можете уверенно создавать красивые сайты и решать простые проблемы верстки с помощью свойства position.

Источник