Как можно показать блок поверх другого без использования свойства CSS "position: absolute"?

Question

Никон

css

Как можно показать блок поверх другого без использования свойства CSS "position: absolute"?

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

11 октября 2023 г. 18:49

Ответы на вопрос 2

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

Answer 1

Если необходимо показать блок поверх другого без использования свойства CSS "position: absolute", можно воспользоваться свойством "position: relative" и задать отрицательное значение "z-index" для верхнего блока.

Например, вот пример на codepen:

```html
<div class="container">
  <div class="background"></div>
  <div class="overlay">
    <h1>Текст поверх фонового блока</h1>
  </div>
</div>
```

```css
.container {
  position: relative;
  height: 200px;
  width: 200px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

.overlay {
  position: relative;
  z-index: -1;
}

h1 {
  font-size: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
```

В этом примере блок "overlay" показывается поверх блока "background", не используя абсолютное позиционирование.

Answer 2

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

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

В файле style.css добавьте следующие стили:

.your_slide {
    position: relative;
}

.your_content {
    position: relative;
    z-index: 2;
}

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