Как расположить элементы горизонтально css

Позиционирование в CSS и Flexbox — объяснение с примерами

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «How CSS Positioning and Flexbox Work – Explained with Examples».

Image by NickyPe from Pixabay

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

Для начала давайте разберем основы.

CSS-свойство position

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

В CSS есть пять типов позиционирования:

  1. Статическое
  2. Относительное
  3. Абсолютное
  4. Фиксированное
  5. Липкое

Давайте разберем каждый тип.

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

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

Вот как выглядит код:

В этом примере у нас есть родительский элемент ( parent ), а затем по порядку идут элементы-потомки ( child-one , child-two , child-three ). Все они имеют статическое позиционирование, совпадающее с нормальным потоком страницы.

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

Относительное позиционирование работает почти так же, как статическое. Но все же не в точности так же.

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

Чтобы разобраться, давайте обратимся к примеру.

Если мы запустим наше приложение, мы не заметим никакой разницы в выводе. То есть, статическое и относительное позиционирование одинаковы, если не применять свойства top , bottom , left и right .

Теперь давайте попробуем добавить эти свойства.

Здесь мы используем относительное позиционирование и свойство top для child-one .

Это «выбрасывает» элемент child-one из нормального потока документа, и он смещается на 10px вниз относительно своего «нормального» места (т. е. того места, которое у него было бы без этого смещения).

Вы видите, что при сдвиге этот элемент перекрывает элемент child-two .

Если задать свойства left , right или bottom , поведение будет таким же, сменится только направление сдвига.

Основная причина, по которой элемент child-one накладывается на child-two , состоит в том, что child-one больше не является частью нормального потока документа, а элементы child-two и child-three остались в этом потоке.

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

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

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

Здесь элемент child-one выпадает из нормального потока, потому что ему задано свойство top: 0px . Обратите внимание, что сам элемент позиционирован абсолютно, но его родительский элемент — статический. Поэтому child-one позиционируется относительно элемента body .

А что если установить абсолютное позиционирование для parent и указать top: 0px ?

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

Есть и третий вариант использования. Мы можем установить для parent относительное позиционирование, и для child-one — абсолютное.

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

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

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

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

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

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

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

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

И если мы прокрутим страницу, все остальные элементы-потомки прокрутятся согласно потоку документа, но фиксированный останется на том же месте.

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

Липкое позиционирование — это комбинация относительного и фиксированного.

Если мы зададим элементу-потомку липкое позиционирование, его вид не изменится (как в случае с относительным позиционированием). Но когда мы начнем скроллить, «липкий» потомок приклеится к верху и его позиция зафиксируется.

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

Теперь, разобравшись с видами позиционирования, давайте сосредоточимся на Flexbox.

Как использовать Flexbox

(О выборе между Grid и Flexbox можно почитать в статье «Grid — для макетов, Flexbox — для компонентов», — прим. ред. Techrocks).

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

Но что, если нам нужно расположить их в ряд?

Здесь нам на помощь приходит Flexbox. Этот функционал CSS позволяет располагать элементы с учетом строк и столбцов, а также задавать промежутки между ними (пространство вокруг них).

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

Обратите внимание, что для класса .parent установлено свойство display: flex . Благодаря этому наши элементы-потомки расположились в ряд. Это расположение, принятое во Flexbox по умолчанию.

Давайте посмотрим другие варианты расположений.

Как располагать элементы при помощи Flexbox

flex-direction

Свойство flex-direction служит для указания главной оси, по которой будут располагаться элементы. То есть, оно определяет, как элементы будут отображаться на экране: горизонтально или вертикально.

Свойству flex-direction назначают значение row, если элементы нужно расположить в ряд, слева направо (это значение по умолчанию):

Значение column позволяет расположить элементы в виде столбцов, т. е. вертикально:

Значение row-reverse работает так же, как row , но порядок элементов будет обратным. Первый элемент станет последним, а последний — первым. расположение элементов будет противоположным тому, что было бы при значении flex-direction: row :

Аналогично, значение column-reverse служит для расположения элементов вертикально, но в обратном порядке.

justify-content

Это свойство определяет выравнивание элементов вдоль горизонтальной оси контейнера.

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

При значении start — в начале страницы.

При значении end — в конце страницы.

Значение space-around позволяет распределить элементы по ширине flex-блока. Элементы будут разделены промежутками. Расстояния между каждой парой соседних элементов будут одинаковыми, а пустые пространства перед первым элементом и после последнего элемента будут равны половине пространства между парами элементов.

Вы видите, что пространства между child-one , child-two и child-three одинаковые, а пространства перед child-one и после child-three — меньше.

Значение space-between максимизирует пространство между элементами, прижимая первый и последний к началу и концу контейнера по главной оси.

Значение space-evenly дает эффекта, похожий на эффект от значения space-around , с той разницей, что пространство от краев контейнера до первого и последнего элементов будет таким же, как и пространство между элементами.

align-items

Свойство align-items аналогично свойству justify-content , но служит для выравнивания элементов по вертикали. Работает только с фиксированной высотой контейнера.

Значение center позволяет центрировать элементы по вертикали.

При значении flex-start элементы выравниваются по верхнему краю страницы.

При значении flex-end — выравниваются по нижнему краю.

Теперь вы знаете основы Flexbox.

Как выравнивать элементы по центру экрана

Свойства Flexbox можно использовать вместе. Например, если мы хотим расположить элементы по центру и по горизонтали, и по вертикали, мы можем задать и align-items: center , и justify-content: center .

CSS: как расположить элемент в правом нижнем углу?

Я пытаюсь расположить текстовый элемент "Bet 5 days ago" в правом нижнем углу. Как я могу это сделать? И, что еще более важно, Пожалуйста, объясните, чтобы я мог победить CSS!

alt text

2 ответа

Я пытаюсь разместить свой div с некоторыми заметками в правом нижнем углу экрана, который будет отображаться все время. Я использовал для этого следующий css: #foo < position: fixed; bottom: 0; right: 0; >Он отлично работает с Chrome 3 и Firefox 3.6, но IE8 отстой. что может быть подходящим.

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

Допустим, ваш HTML выглядит примерно так:

Затем с помощью CSS вы можете сделать так, чтобы этот текст отображался в правом нижнем углу следующим образом:

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

Установите CSS position: relative; на поле. Это приводит к тому, что все абсолютные положения объектов внутри будут относительно углов этого ящика. Затем установите следующий CSS в строке "Bet 5 days ago":

Если вам нужно разместить текст дальше от края, вы можете изменить 0 на 2px или что-то подобное.

Похожие вопросы:

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

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

У меня есть изображение 500×500 px, которое установлено в качестве фонового изображения на моем сайте (как фоновое изображение <body> ), но мне нужно, чтобы это изображение находилось в правом.

Я пытаюсь разместить свой div с некоторыми заметками в правом нижнем углу экрана, который будет отображаться все время. Я использовал для этого следующий css: #foo < position: fixed; bottom: 0;.

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

int browserHeight=Window.getClientHeight(); int browserWidth=Window.getClientWidth(); dialog.setPopupPosition(browserWidth-dialog.getElement().getClientWidth().

Контейнер div имеет фиксированную ширину 540px min-высоту 200px. я хочу поставить еще один div в правом нижнем углу этого div. как мне это сделать <div style=width:540px; min-height:200px;.

Я бы хотел, чтобы заблокировать фреймворка Bootstrap 3 модальные окна в правом нижнем углу окна, как это: Я пытался переместить его с помощью top: x%; left: x% CSS, но это полностью нарушает.

У меня есть ионный слайдер в этом codepen . Как я мог расположить пейджер в правом нижнем углу? Я пытаюсь использовать следующий код, но он не работает. .slider-pager

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

CSS Position элемент относительно двух других

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

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

enter image description here

У меня такой код:

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

Результат: выровнен по элементу списка

enter image description here

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

Вот как это выглядит: под заголовком

enter image description here

Итак, то, что я хочу, — это «верх: 100%»; относиться ко всему заголовку и "left: 0;" быть связанным с элементом списка, дочерним элементом которого является подменю.

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

Спасибо, что прочитали мой вопрос, надеюсь, скоро на него ответят!

2 ответа

Вы можете разместить .submenu относительно заголовка, а затем воспользоваться поведением left: auto .

Тогда .submenu будет абсолютно позиционированным элементом, все свойства которого left , width и right равны auto .

Если все три из «left», «width» и «right» являются «auto»: сначала установите любой ‘auto’ значения для ‘margin-left’ и ‘margin-right’ равны 0. Затем, если ‘direction’ свойство элемента, устанавливающего static-position содержащий блок ‘ltr’ установлен ‘left’ в статическую позицию и применить правило номер три ниже

Это статическое положение определяется как

Статическая позиция для ‘left’ — это расстояние от левого края содержащего блока до левого края поля гипотетического блока, который был бы первым блоком элемента, если бы его свойство ‘position’ было ‘static’ и ‘ float ‘было’ none ‘. Значение отрицательное, если гипотетический блок находится слева от содержащего блока.

Итак, давайте удалим position: absolute и посмотрим:

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

Чтобы предотвратить это, .submenu должен создать контейнер блока. Блок-контейнеры встроенного уровня могут быть созданы с помощью display: inline-block .

Теперь .submenu имеет желаемое статическое положение слева.

Следовательно, при повторном добавлении position: absolute он работает как нужно:

Подводя итог, исправление

Просто добавьте «position: relative» только для «#header», удалите «left: 0» для «#header ul> li> .submenu» и «display: inline-block;» для "#header li"

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

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