Как задать абсолютное позиционирование в css

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

Как в данной ситуации сделать абсолютное позиционирование круглых шаров на странице и от чего лучше позиционировать? Как лучше реализовать?

Отслеживать
задан 9 фев в 15:43
Dmitry Nefedov Dmitry Nefedov
47 7 7 бронзовых знаков
Нет «правильного» способа позиционировать элементы, их нужно позиционировать вручную.
9 фев в 16:05

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Абсолютное позиционирование — CSS: Позиционирование элементов

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

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

 .absolute  position: absolute; >   class="absolute"> Блок с абсолютным позиционированием. Внутри него могут находиться любые элементы и они также будут перемещаться вместе с главным блоком.

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

Если элемента не существует в потоке документа, то относительно чего будет позиционироваться элемент? Ответ прост: относительно левого верхнего угла страницы. Теперь именно эта точка становится началом координат со значениями (0, 0) для нашего элемента, а управление расположением осуществляется с помощью тех же свойств top , right , bottom , left .

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

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

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

Открыть доступ

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

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

Читать:

Как сделать скриншот на ноутбуке windows

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

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

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

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

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

Открыть доступ

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

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

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

Как задать абсолютное позиционирование в css

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

какой родитель станет точкой отсчета;
величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4 , этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).