Как позиционировать блоки в css
Перейти к содержимому

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

  • автор:

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

Ознакомился с материалами на https://ru.bem.info/, но не могу для себя прояснить ряд моментов, объясните пожалуйста:

  1. Где должен быть описан внешний видблока (размер, цвет и т.д.): можно в css-классе блока писать или обязательно в модификаторе блока? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
  2. Где должен быть описан внешний видэлемента: можно в css-классе элемента или обязательно в модификаторе элемента? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?
  3. В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?
  4. Все что касается позиционированияэлемента я могу писать в css-классе элементе?

Комментарии: 20
7 years ago

  1. Где должен быть описан внешний видблока (размер, цвет и т.д.): можно в css-классе блока писать или обязательно в модификаторе блока? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?

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

  1. Где должен быть описан внешний видэлемента: можно в css-классе элемента или обязательно в модификаторе элемента? Можно ли писать дефолтный внешний вид прямо в в css-классе блока?

Аналогично предыдущему ответу.

  1. В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)?

Если дочитать тот же документ до раздела про миксы, там найдется ответ: https://ru.bem.info/methodology/quick-start/#Микс

  1. Все что касается позиционированияэлемента я могу писать в css-классе элементе?

Да, т.к. элементы — это «внутренняя кухня» блока.

7 years ago

@tadatuta По поводу 3-го пункта — вы хотите сказать что:

  1. Блок может быть одновременно и элементом родительского блока? И позиционирование описать в css-классе этого элемента?
  2. А как быть с тем что мы можем использовать одни и те же свойства как в css-классе блока, так и в css-классе элемента. К примеру:

Или я search-form задал display: flex; , а в header__search-form display: block; и float: left; .

Т.е., в общем случае, не получится написать header__search-form не посмотрев что используется в search-form .

7 years ago

@RinatMullayanov 1 Да. можно

  1. Здесь играет роль в каком порядке идут стили. При использовании полного БЭМ стека эта проблема решается с помощью зависимостей.

7 years ago

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

7 years ago

@tadatuta @kompolom понял, большое спасибо за разъяснения.

7 years ago

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

7 years ago

@AlexandrKom header__search-form отвечает за позиционирование формы, а, скажем, header__logo — за позиционирование логотипа. И так далее.

7 years ago

  1. Что-то мне подсказывает, что такая обертка не есть тру, т.к. это дополнительный тег, и если каждый блок оборачивать — таких оберток будет довольно много, а ведь можно и обойтись без них.
  2. Вам не кажется, что происходит отрыв информации касающейся бэм-блока (его позишн) от самого блока.
  3. если я захочу перенести блок в другой проект/страницу/бэм-блок — мне придется создавать на новом месте новую обертку для него и писать заново css. Не быстрее поправить пару цифр в классе?

7 years ago

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

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

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

В том-то и дело, что блоки form , logo или button не должны ничего знать про свое позиционирование, т.к. могут быть использованы многократно в совершенно разных местах на странице, с разными отступами и так далее. Про то, что логотип имеет отступ в 22 пикселя от границы шапки должна знать именно шапка (в ней всегда есть такой отступ от края, а логотип где-нибудь подвале вполне может иметь другие отступы и там пусть за них отвечает подвал).

если я захочу перенести блок в другой проект/страницу/бэм-блок — мне придется создавать на новом месте новую обертку для него и писать заново css. Не быстрее поправить пару цифр в классе?

Вот есть у меня блок button и я хочу его использовать 40 раз на проекте: «Войти», «Найти», «Сохранить», «Отмена», «Купить», «Отправить», «Подтвердить» и так далее. Как быть с парой цифр в классе?

6 years ago

В методологии указано: Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. А где тогда указывать свойства влияющие на позиционирование(position, display, float, margin и т.д.)? Если дочитать тот же документ до раздела про миксы, там найдется ответ: https://ru.bem.info/methodology/quick-start/#Микс

можете объяснить почему тогда в исходном коде сайта бэма я вижу кучу блоков с позиционированием и без миксов?

6 years ago

@gexenemy, наверное, можем, но нужные конкретные примеры

Абсолютное позиционирование относительно каких-либо элементов на веб-странице.

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

Но, такое положение дел можно изменить.

Предположим, что мы имеем следующий код:

Блок 1
Блок 2
Блок для абсолютного позиционирования

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

А что делать, если мы хотим абсолютно позиционировать элемент относительно элемента div с содержимым «Блок 2»?

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

Мы уже знаем, что добавление position:relative, без добавления к нему свойств left, right, top или bottom не изменяет первоначального положения блока.

Давайте это сейчас и сделаем.

Блок 1
Блок 2
Блок для абсолютного позиционирования

Все. Проблема решена. Теперь элемент с position:absolte располагается не относительно окна браузера, а относительно элемента div с содержимым «Блок 2».

Какие выводы можно сделать?

Абсолютное позиционирование элемента будет происходить либо относительно окна браузера, либо относительно первого попавшегося родительского элемента со свойством position:relative;

Таким образом можно решать множество проблем верстки и позиционировать элементы в нужном месте без проблем.

И еще один момент. При попытке задать ширину абсолютно позиционируемого блока в %, проценты будут браться от ширины первого блока, который имеет свойство position:relative;

Блок 1
Блок 2
Блок для абсолютного позиционирования

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.

#content

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

#content

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

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

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

#div-1a

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

#div-1a

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует #content < position:relative; >#div-1a

6. Две колонки

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

#content < position:relative; >#div-1a < position:absolute; top:0; right:0; width:200px; >#div-1b

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

#content < position:relative; height: 450px; >#div-1a < position:absolute; top:0; right:0; width:200px; >#div-1b

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

8. Float

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

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

#div-1a

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

#div-1a < float:left; width:150px; >#div-1b

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

#div-1a < float:right; width:150px; >#div-1b

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

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

#div-1a < float:left; width:190px; >#div-1b < float:left; width:190px; >#div-1c

Или же назначить родительскому контейнеру свойство overflow: hidden

#content

В любом случае, результат будет один и тот же.

Заключение

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

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

Суть способа заключается в том, чтобы наложить блоки друг на друга посредством margin-right: -100% и содержимое правого блока выровнять по правому краю с помощью text-align: right.
Оба блока (right и left) желательно записывать в одну строку, иначе из-за символа переноса строки правый блок будет чуть-чуть вылезать за границы блока-родителя.
Ссылкам обязательно нужно ставить position: relative, иначе из-за наложения блоков некоторые могут быть некликабельные.

Плюсы способа

Главный плюс в том, что теперь для наших блоков начинает работать vertical-align. И мы легко можем выровнять их и по верхней границе и по нижней и по центру.

Минусы способа

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

Ссылка на готовый пример

P.S.

Я не встречал такого способа в интернете, посему просьба: если кто-то найдёт аналогичную статью опубликованную раньше, сообщите мне пожалуйста.

Upd.

В комментариях моё внимание внимание обратили на способ, использующий text-align: justify. Этот способ тоже хорош, но у него есть два недостатка. Во-первых он требует введения дополнительного элемента, эмулирующего последнюю строку текстового блока, а во-вторых, он не будет работать в IE6-IE7 для блочных элементов.

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

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