Как наложить элементы друг на друга css

Как расположить 2 inline-block друг под другом без костылей?

Есть 2 inline-block , их нужно поместить друг под другом. Есть ли способ без костылей и не правя ‘html’ это сделать? з.ы. в изначальном коде в инлайн блоках содержатся динамические элементы, поэтому нельзя применять ширину 100%

.a, .b < display: inline-block; >.a, .b < float: left; >.b

Текст
 
Текст

Отслеживать
задан 22 дек 2015 в 10:57
4,488 6 6 золотых знаков 38 38 серебряных знаков 93 93 бронзовых знака
а зачем вы флоутите то, что заинлайнено? О_________________О
22 дек 2015 в 11:01
а разве заставлять inline блоки вести себя не так, как задумано изначально, это уже не костыли?
22 дек 2015 в 11:01

@Алексей Шиманский «а зачем вы флоутите то, что заинлайнено?» есть у меня такая потребность — этого достаточно? » потому что они к тегам прописаны, а не к классам» — поправил, быстро набирал — опечатался

22 дек 2015 в 11:10

@lexxl если уже так разобраться — любое css правило — это костыль, который вмешивается в изначальную структуру html

22 дек 2015 в 11:12

чёт я всё равно не понимаю, этот css с float в вопросе — это у вас в проекте так и изменять нельзя? или зачем он там?

22 дек 2015 в 11:20

2 ответа 2

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

У вас в принципе подход не правильный, вам нужно либо добавить врапперы, либо хотя бы
добавить.

Добавить обертку:

 
Текст
 
 
Текст
 

Добавить перенос:

Текст
 
Текст

Либо через псевдоэлементы, но только для display: inline; :

.a, .b < display: inline; white-space:pre; >.b:before

Текст
 
Текст

Еще вариант через white-space: pre; для родителя, но тогда будут учитываться все проблемы и переносы в разметке:

.parent < white-space: pre; >.a, .b

Текст
 
Текст
 

Отслеживать
ответ дан 22 дек 2015 в 11:38
5,916 1 1 золотой знак 15 15 серебряных знаков 35 35 бронзовых знаков

Вариант, который вижу я:

Текст
 
Текст

Отслеживать
ответ дан 22 дек 2015 в 11:07
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков

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

22 дек 2015 в 11:15
@Вася а вот надо упоминать как можно больше информации, чтоб не возникало таких сюрпризов)
22 дек 2015 в 11:16
дополнил описание
22 дек 2015 в 11:17

@Вася Мне кажется вам еще больше инфы надо добавить. Что у вас там добавляется, что вы делаете, для чего это нужно. Что НЕ нужно и т.д. А то так мало что понятно

22 дек 2015 в 11:23
php цикл добавить? а смысл
22 дек 2015 в 13:03

• html
• css
• inline
• blocks

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

Похожие

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

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

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

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

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

Вертикальное выравнивание CSS — весьма непростая работа. Я видел достаточно людей, борющихся с этим, и постоянно обнаруживаю “критические” ошибки, когда дело доходит до реального адаптивного дизайна.

Но не бойтесь: если вы уже боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

Поговорим о свойстве CSS vertical align

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “ text-align ”. Ах, если бы все было так просто.

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div , то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block; .

Мы хотим центрировать контент, а не сам div!

У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height . Это означает, что нужно знать высоту элемента, но нельзя ее устанавливать. Таким образом, ваш текст будет всегда в центре.

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

Взгляните на приведенный ниже пример.

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

Чтобы это работало, должен быть родительский контейнер с display: table , а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle .

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

Свойство position

Начнем с основ выравнивания по вертикали CSS div :

• position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML ;
• position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом ( не static ). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
• position: relative — используется для позиционирования элемента относительно его нормального положения ( статического ). Это значение сохраняет порядок потока документа;
• position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства ( top и z-index ) работают только в том случае, если для элемента задано значение position ( не static ).

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали ? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

Старое свойство : нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите приведенный ниже пример.

Новое свойство CSS3 : можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотрите приведенный ниже пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px . Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed ? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

Вы слышали о спецификации flexbox?

Можно использовать flexbox . Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали . С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Используя flexbox расположение, можно центрировать несколько блоков.

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

Ссылки и дополнительная литература

• Изучение CSS разметки
• FlexBox Froggy
• Полное руководство по flexbox
• Песочница flexbox

ВЛ Виктория Лебедева автор-переводчик статьи «

Как с помощью CSS создать адаптивное выпадающее меню навигации

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

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

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега .

Создайте файл styles.css и подключите его в HTML-документе:

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

HTML

Добавьте следующий HTML-код в тег

Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.

CSS

В файл styles.css добавим несколько стилей для всех элементов:

Затем примените эти стили к header.

header

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img < height: 50px; >.menu-icon

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

Теперь добавьте стили списка и ссылок:

nav ul < list-style-type: none; >nav ul li < padding: 0 15px; >nav ul li a < display: inline-block; padding: 12px; /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */ color: #DAE1E7; text-decoration: none; letter-spacing: 0.05em; >

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Хак с чекбоксом

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

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

HTML

В файле index.html добавьте элемент checkbox перед элементом nav:

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

CSS

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox

Это сердце кода:

#checkbox:checked ~ nav ul

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Для больших экранов

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

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px)

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) < .menu-icon < display: none; >>

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

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) < nav < position: relative; top:-10px; background-color: transparent; >nav ul < max-height: 70px; padding: 15px 0; text-align: right; >nav ul li < display: inline-flex; padding-left: 20px; >>

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

Как наложить блоки друг на друга css

При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.

Способ 1. Использование свойства Position

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

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

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

Способ 2. Использование CSS Grid

Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.

С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:

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

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

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

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

Свойство CSS z-index

Свойство CSS z-index отвечает за то, какой элемент будет находится выше/ниже при наложении. Другими словами какой конкретно элемент перекроет другой. Это свойство работает только для элементов, у которых значение position задано как:

• position : absolute ;
• positionn : fixed ;
• positionn : relative ;

Синтаксис CSS z-index

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

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

Как наложить один блок на другой

Пример 1. Наложение друг на друга квадратов с z-index

В первом примере мы рассмотрим самый простой вариант со смещениями блоков через margin, чтобы добиться наложения. Обратите внимание, что везде присутствует свойство position: relative .

На странице преобразуется в следующее

Сейчас у каждого нового блока z-index на единицу больше (block1 — 1, block2 — 2, block3 — 3, block4 — 4, block5 — 5). Изменим порядок z-index в нашем примере следующим образом:

На странице преобразуется в следующее

В этом примере block4 стал выше всех, поскольку его z-index выше остальных (5). Подчеркнем еще раз, что если убрать position: relative , то это отменит действие z-index.

Для обращения к z-index из JavaScript нужно писать следующую конструкцию:

Как наложить один div поверх другого с помощью CSS

Вы можете использовать CSS-свойство position в сочетании со свойством z-index для наложения одного поверх другого элемента . Свойство z-index определяет порядок наложения позиционированных элементов (т. е. элементов, значение position которых является absolute , fixed , или relative ).

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

В приведенном выше примере элемент div с классом .stack-top будет расположен поверх другого div .

Подробнее см. Руководство по позиционированию в CSS, чтобы узнать больше о методах позиционирования CSS.

Как наложить блоки друг на друга html+css?

Пишу, что-то типо оригинального меню для сайта.
Нужно:
1. menu3 не сьезжало вниз. Но наезжало на menu2, потому-что hidden. Т.е. menu2 и menu3 — просто выпадающее меню.
2. obj должны быть максимально близко к синей шапке, чтобы это было меню, а не отдельная шапка.
Пример на фото

• Вопрос задан более трёх лет назад
• 2783 просмотра

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter