Показать блок поверх другого без absolute?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

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

snippet

Дополнительно:

Гридами.
Но размер будет определяться большим из них или по соседним блокам, если stretch.

  • Ankhena, Сработало, спасибо! Как отметить в качестве ответа?
  • Абсолютом можно позиционировать не слайды, а фоновый блок (картинку)

    • Засунуть в слайд контент, который будет определять высоту, например текст. Дать z-index этому контенту. Далее засунуть в этот слайд блок, например картинку или видео и уже этому блоку дать абсолютное позиционирование.

    <div class="your_slide">     <div class="your_content">Hello world</div>     <span class="your_back"></span> </div>

    <div class="your_slide"> <div class="your_content">Hello world</div> <span class="your_back"></span> </div>

    style.css

    .your_slide{     position: relative; } .yout_content{     position: relative;     z-index: 2; } .your_back{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 1; }

    .your_slide{ position: relative; } .yout_content{ position: relative; z-index: 2; } .your_back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

    • Неа, не сработает. Вы написали тоже самое, что и у меня в примере. С такими стилями и структурой задник перекрывает контент.
    • GeKskill, Перекрытие регулируется параметром z-index, я же указал. Для того чтобы работал этот параметр необходимо обязательно указать position: relative или другие отличные от значения по умолчанию
    • Сорри, я когда скопипастил ваш код, а там была опечатка в классе. Работает, спасибо!
    • GeKskill, Отметьте, пожалуйста, как ответ)
    • поменять в разметке местами задник и контент и тогда z-index не нужен будет.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Игорь Волков Ответ

    Для показа блока поверх другого без использования свойства position: absolute, можно воспользоваться свойством display: flex.

    Пример решения проблемы на языке CSS:

    <div class="container">
  <div class="block1">Блок 1</div>
  <div class="block2">Блок 2</div>
</div>

    <div class="container"> <div class="block1">Блок 1</div> <div class="block2">Блок 2</div> </div>

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 200px; /* Высота блока */
}
 
.block1 {
  background-color: #f0f0f0;
  padding: 20px;
}
 
.block2 {
  background-color: #ccc;
  padding: 20px;
  position: relative;
  z-index: 1;
}

    .container { display: flex; justify-content: center; align-items: center; position: relative; height: 200px; /* Высота блока */ } .block1 { background-color: #f0f0f0; padding: 20px; } .block2 { background-color: #ccc; padding: 20px; position: relative; z-index: 1; }

    В данном примере блоки block1 и block2 будут располагаться внутри контейнера container. Блок block2 будет находиться поверх блока block1 за счет использования свойства z-index: 1. При этом блоки будут выравниваться по центру как по горизонтали, так и по вертикали благодаря свойствам justify-content: center и align-items: center.

    Таким образом, используя свойство display: flex, можно легко расположить блоки друг над другом без необходимости использовать position: absolute.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

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

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов