Css позиционирование блоков

Содержание

#10 — Позиционирование блоков в CSS

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

Видео урок:

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

Помимо этого, существует другое свойство — . Оно может принимать несколько значений:

  • fixed — фиксируется в одном месте экрана и при скролле никуда не исчезает;
  • relative — относительное позиционирование (можно задать отступы от того места, где сейчас находиться сам объект);
  • absolute — абсолютное позиционирование (можно задать глобальные отступы).

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

Онлайн редактор кода

Загрузка…

Домашнее задание

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям!

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также «Готовое решение».
PS: подобные задания доступны только при подписке от 1 месяца!

ПредыдущийСледующий

Также стоит посмотреть

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

лабы по информатике, егэ

Некоторые из этих техник имеют длинную историю (флоаты), другие (флексбокс) достигли популярности в последние годы.

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

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

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

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

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

это значение свойства позиционирования по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Подробнее конвертация строчных элементов в блочные описана в таблице.

    А вот пример:

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

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

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

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

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

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

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

    Вот пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Заключение

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

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

    Рис. 3.28. Галерея фотографий

    Если для формирования секций использовать тег <div>, как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float, которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.

    В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block.

    Характеристики этих элементов следующие.

    • Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
    • Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
    • Ширина равна содержимому плюс значения отступов, полей и границ.
    • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
    • Можно выравнивать по вертикали с помощью свойства vertical-align.
    • Разрешено задавать ширину и высоту.
    • Эффект схлопывания отступов не действует.

    Чтобы создать галерею, представленную на рис. 3.28 для тега <div> следует задать значение display как inline-block, а внутрь него добавить изображение и подпись через тег <p> (пример 3.18).

    Пример 3.18. Использование display

    XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

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

    Рис. 3.29. Разная высота секций

    Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align, добавив это свойство к классу photo. Если указать значение top, то поменяется отображение секций (рис. 3.30).

    Рис. 3.30. Выравнивание по верхнему краю

    Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout. Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

    CSS — Урок 11. Относительное позиционирование

    Пример 3.19. Стиль для IE

    Конструкция [if lte IE 7] означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom, оно нестандартное и предназначено для установки свойства hasLayout, напрямую которое задавать нельзя.

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

    Пример 3.20. Каталог товаров

    XHTML 1.0CSS 2.1IECrOpSaFx

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

    Рис. 3.31. Каталог товаров

    Чтобы не задавать каждому тегу <div>, которых может быть довольно много, свой класс, в примере введён <div> с идентификатором catalog и стиль применяется к тегам внутри него.

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

    Рис. 1. Веб-страница с навигацией в правой колонке

    Для создания подобных колонок используем два слоя, стиль которых приведен в примере 1.

    Пример 1. Двухколонный макет

    Для левой колонки задаем отступ слева через свойство margin-right, оно включает в себя ширину правой колонки, ее положение от правого края окна браузера плюс расстояние между колонками. Для правой колонки устанавливаем абсолютное позиционирование с помощью свойства position: absolute, а положение самого слоя управляется через right и top.

    CSS — Позиционирование блочных элементов

    Их значения подбираются опытным путем в зависимости от вида макета и желания разработчика.

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

    Рис. 2. Картинка для создания закругления внизу колонки

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

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

    Рис. 3. Увеличенный фрагмент картинки

    В примере 2 приведен стиль для добавления рисунка к нижней части колонки.

    Пример 2. Рисунок в качестве фона

    За счет того, что в рисунке использовалась прозрачность, цвет колонки легко менять через универсальный атрибут background. С помощью него же задается путь к изображению и его положение относительно края слоя. По умолчанию фон повторяется по вертикали и горизонтали, так что требуется отключить эту возможность через аргумент no-repeat. К нижнему краю текста колонки также необходимо добавить отступ паpaметром padding-bottom, ведь нижняя граница скругленная и текст не должен на нее «наступать».

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

    Пример 3. Двухколонный макет

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

    Вертикальное выравнивание в диве.

    Часто бывает, что требуется выравнять текст по нижнему краю или по середине блока. Вроде бы все просто: указать для DIV display:table-cell и vertical-align:middle (или bottom), но IE не понимает значения table-cell для свойства display.

    CSS — Позиционирование блочных элементов

    Придется выкручиваться…

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

    Выравнивание по нижнему краю.

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

    HTML:

    <div>
       <span>Текст</span>
    </div>

    СSS:

    div {
       height:400px;
       width:300px;
       position: relative;
    }
    div span {
       position: absolute;
       bottom: 0%;
    }

    Этот способ отлично сработает во всех браузерах и никаких хаков или условных коментариев не требует.

    Выравнивание по середине блока

    В данном случае нам потребуется еще один SPAN. Первый SPAN поместит текст относительно середины, а второй приподнимет текст на половину своей высоты.

    HTML:

    <div>
       <span><span>Текст</span></span>
    </div>

    СSS:

    div {
       position: relative;
       height:400px;
       width:300px;
    }
    div span {
        position: absolute;
        top: 50%;
    }
    div span span {
       position: relative;
       top: -50%;
    }

    Но это сработает только в Internet Explorer, так как он по-особенному обрабатывает свойство top. Для кроссбраузерности нашего кода придется прибегнуть к условным коментариям для IE, а для остальных браузеров использовать display:table-cell и vertical-align:middle. Вот полный код для всех браузеров:

    HTML и CSS:

    <style type="text/css">
    div {
       display: table-cell;
       vertical-align: middle;
       height:400px;
       width:300px;
       background-color:#cccccc;
    }
    div span {
       position: relative;
    }
    </style>
    <!––[if IE]>
    <style type="text/css">
    div {
       position: relative;
    }
    div span {
       position: absolute;
       top: 50%;
    }
    div span span {
       position: relative;
       top: -50%;
    }
    </style>
    <![endif]––>
    <div>
       <span><span>Текст</span></span>
    </div>

    Кстати, если Вам потребуется выравнять текст еще и по горизонтали, добавьте к описанию стиля для тега SPAN следующее:

    display: block;
    left: 0%;
    width: 100%;

    Теперь Вы можете выравнивать текст и по горизонтали с помощью свойства text-align для тег SPAN.

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

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