Позиционирование в css: Методы позиционирования элементов в CSS

Относительное позиционирование | CSS: Позиционирование элементов

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML-документа может быть размещён вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML-документа.

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

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

При наведении на элемент (для этого можно использовать селектор .animate-hover:hover) мы использовали CSS-правило position: relative, что означает применение относительного позиционирования для элемента. Управлять расположением элемента со свойством position можно с помощью четырёх CSS-свойств:

• top
• right
• bottom
• left

Каждое из этих свойств принимает значение, на которое будет «сдвинут» элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств top, right, bottom и left.

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Профессия

с нуля

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

12 января 10 месяцев

Профессия

Новый с нуля

Онлайн-буткемп. Фронтенд-разработчик

Интенсивное обучение профессии в режиме полного дня

9 февраля 4 месяца

Профессия

с нуля

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

12 января 16 месяцев

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Для перемещения по курсу нужно зарегистрироваться

1. Введение ↳ теория

2. Поток документа ↳ теория / тесты

3. Относительное позиционирование ↳ теория / тесты / упражнение

4. Абсолютное позиционирование ↳ теория / тесты / упражнение

5. Относительное и абсолютное позиционирование ↳ теория / тесты / упражнение

6. Фиксированное позиционирование ↳ теория / тесты / упражнение

7. Плавающие элементы ↳ теория / тесты / упражнение

8. Наложение элементов ↳ теория / тесты / упражнение

Порой обучение продвигается с трудом. Сложная теория, непонятные задания… Хочется бросить. Не сдавайтесь, все сложности можно преодолеть. Рассказываем, как

Не понятна формулировка, нашли опечатку?

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

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов
3. Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

5 особенностей позиционирования в CSS

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

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования.

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

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

• relative
• absolute
• fixed
• sticky

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

• top
• right
• bottom
• left
• Начальное значение этих свойств — ключевое слово auto.

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

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

• абсолютно (absolute) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
• относительно позиционированные (relative) и приклеенные (sticky) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
• фиксированные (fixed) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (overflow:auto). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.

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

Позиционирование элементов с абсолютным типом позиционирования

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

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

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

Это демонстрируется следующим примером:

See the Pen Little-known thing #1 — Positioning elements with absolute positioning type by George (@georgemarts) on CodePen.

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0, его предку (красному блоку) позиционирование не задавалось вообще.

Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков.

Абсолютно позиционированные элементы игнорируют свойство

float

Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство float получит значение none. С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим.

Взгляните на соответствующее демо:

See the Pen Little-known thing #2 — The absolutely positioned elements ignore the «float» property by George (@georgemarts) on CodePen.

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

Абсолютно позиционированные строчные элементы становятся блочными

Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице.

А вот пример:

See the Pen Little-known thing #3 — The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов

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

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

Вот пример:

See the Pen Little-known thing #4 — The margins don’t collapse on absolutely positioned elements by George (@georgemarts) on CodePen.

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

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

Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

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

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

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

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

See the Pen Little-known thing #5 — The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.

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

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

Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя.

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

Позиционирование | Проект Один

Введение

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

Результаты обучения

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

Статическое и относительное позиционирование

Режим позиционирования по умолчанию, к которому вы привыкли, — position: static . Разница между статическим и относительным довольно проста. Статика — это позиция по умолчанию для каждого элемента, а свойства сверху , справа , снизу и слева не влияют на положение элемента. Относительный, с другой стороны, почти такой же, как статический, но свойства top , ri....(etc.) смещают элемент относительно его нормального положения в потоке документа.

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

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

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

• модальные
• изображение с подписью к нему
• иконки поверх других элементов

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

См. перо Абсолютное положение | Позиционирование CSS от TheOdinProject (@TheOdinProjectExamples) на КодПене.

Отказ от ответственности: абсолютное позиционирование имеет очень специфические варианты использования, и, по возможности, следует отдавать предпочтение использованию flexbox или сетки. Абсолютное позиционирование не следует использовать для создания макетов целых страниц.

Фиксированное позиционирование

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

Липкое позиционирование

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

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

Назначение

1. Это динамичное видео дает хорошее визуальное представление о различных способах позиционирования. Иди и смотри.
2. В этой статье MDN рассматриваются все концептуальные детали позиционирования.
3. Эта страница CSS Tricks должна дать вам другое понимание темы. Вы должны прочитать это также.
4. Наконец, в этой статье обсуждается разница между фиксированным и фиксированным позиционированием. Ее полезно прочитать, чтобы лучше понять разницу.

Проверка знаний

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

• В чем разница между статическим и относительным позиционированием?
• Для чего полезно абсолютное позиционирование?
• В чем разница между фиксированным и липким позиционированием?

Дополнительные ресурсы

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

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

Какие существуют четыре типа позиции в CSS и чем они отличаются? | Kevin Chisholm

Если вы Front-End Web-разработчик, вам должно быть комфортно обсуждать позиционирование CSS. В этой статье мы подробно рассмотрим каждый из четырех типов позиции в CSS и чем они отличаются.0117

Статическое позиционирование

«Статическое», вероятно, самое легкое для объяснения из всех четырех значений. Это позиция по умолчанию для любого элемента HTML. Даже если вы не укажете значение позиции, значение «static» применяется к свойству позиции этого элемента. Самый простой способ определить «статическое» значение позиционирования заключается в том, что при назначении HTML-элемент ведет себя точно так, как вы ожидаете. Я говорю это, потому что вы, вероятно, написали сотни, если не тысячи строк CSS, где вы НЕ указывали значение позиции. Если вы не укажете значение позиции, значение будет «статическим», а поведение будет таким, какое вы обычно ожидаете от HTML-элемента.

Фиксированное Позиционирование

«Фиксированное» — второе из четырех значений, которое легче всего объяснить. Когда применяется фиксированное позиционирование, элемент html позиционируется абсолютно относительно окна браузера. Он полностью удален из документооборота и не оказывает физического влияния на любой другой элемент в DOM. Свойства «сверху», «снизу», «слева» и «справа» можно использовать для «подталкивания» элемента, но это все: ничто другое не сдвинет этот элемент с его «фиксированного» положения. Даже когда документ прокручивается, целевой элемент сохраняет свое «фиксированное» положение относительно окна браузера.

Пример № 1 А

.исправлено{ положение: фиксированное; слева: 25 пикселей; верх: 25 пикселей; }

.fixed{     position:fixed;     слева: 25 пикселей;     верх: 25 пикселей; }

Пример № 1 B

.исправлено{ положение: фиксированное; справа: -50 пикселей; внизу: 50 пикселей; }

.fixed{     position:fixed;     справа: -50 пикселей;     снизу: 50 пикселей; }

В примере № 1А элемент с классом «.fixed» сдвинут на 25 пикселей в двух направлениях. Что может быть обманчиво, так это то, что эти значения «смещены от». Итак, если вы укажете «правильное» значение «25 пикселей», элемент будет перемещен на 25 пикселей «от» вправо (то есть не «вправо»). Таким образом, эффект может быть обратным ожидаемому. Ссылка на JsFiddle.net ниже предоставляет расширенную демонстрацию этого.

Вот URL-адрес JsFiddle.net для примера 1A: http://jsfiddle.net/WRuDs/

В примере 1B элемент с классом «.fixed» снова смещен на 50 пикселей в двух направлениях. Разница здесь в том, что для «правильного» свойства было предоставлено отрицательное значение. Конечным результатом является то, что элемент кажется сдвинутым «в направлении» указанного свойства (т. е. на 50 пикселей «вправо»), поэтому он кажется обрезанным, потому что он находится за пределами поля зрения на 50 пикселей. Ссылка на JsFiddle.net ниже предоставляет расширенную демонстрацию этого.

Вот URL-адрес JsFiddle.net для примера № 1B: http://jsfiddle.net/sLGz7/

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

Когда для свойства «position» указано «относительное» значение, указанный элемент будет быть расположен относительно его нормального потока в документе. Сначала это может показаться немного странным, но подумайте об этом так: когда вы просто позиционируете элемент относительно и ничего больше не делаете, визуально ничего не происходит. Но если вы затем укажете значение «сверху», «снизу», «слева» или «справа», то элемент перемещается в любом указанном вами направлении на указанную величину (т. е. в пикселях, дюймах, см и т. д.).

Важное замечание об относительном позиционировании заключается в том, что влияние элемента на поток документов не меняется. Например, если вы расположите элемент относительно и назначите «сверху» значение «-25 пикселей», а «слева» значение «-25», он будет отображаться на 25 пикселей выше и левее того места, где он обычно отображается в документе. Но что касается DOM, положение этого элемента не изменилось. Дело в том, что «подталкивание» элемента в любом направлении не влияет на DOM. Эффект чисто визуальный. Когда вы посмотрите на ссылку примера JsFiddle.net ниже, вы увидите точно такое же поведение в элементе с классом «upAndOver». Элемент кажется «сдвинутым» вверх на 25 пикселей и более 25 пикселей, но пространство, которое он обычно занимал бы в потоке документа, очень хорошо видно (т. е. его появление «вверх и вверх» не повлияло на поток документа).

Пример № 2

дел { должность: родственница; справа: 10 пикселей; }

div{ позиция: относительная; справа: 10 пикселей; }

Вот ссылка JsFiddle.net для расширенной версии примера № 2: http://jsfiddle.net/etAKb/

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

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

Как и в случае с относительным и фиксированным позиционированием, можно указать значения «сверху», «снизу», «слева» или «справа», чтобы можно было указать точное местоположение элемента. В отличие от относительного позиционирования, абсолютно позиционированный элемент полностью удаляется из потока документов и не оказывает физического влияния на любой другой элемент в DOM. Однако побочным продуктом абсолютного позиционирования является то, что у целевого элемента «z-индекс» будет выше, чем у любого элемента, с которым он соприкасается визуально. По умолчанию он будет отображаться «поверх» любого элемента, с которым он перекрывается. Любые одноуровневые элементы целевого элемента, которые имеют одинаковое абсолютное позиционирование, будут отображаться «поверх» предыдущего одноуровневого элемента в том порядке, в котором они появляются в разметке.