Почему блок не резиновый?

Есть блок родитель и есть блок поверх его. Но при сжимании дочерний блок выходит за пределы родительского, а также смещается текст
<div id="trailer">
    <video autoplay width="85%" loop poster="images\poster.jpg">
        <source src="video/nature.mp4" type='video/mp4'>
    </video>
    <div class="blackout">
        <div class="hi">Hi</div>
    </div>
</div>


.trailer {
  position: relative;
}

.blackout {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 87.5%;
  margin-left: 6.25%;
  margin-right: 6.25%;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  display: inline-block;
  mix-blend-mode: multiply;
  height: 99%;
}

.hi {
  margin-top: 5%;
  font-weight: bolder;
  font-size: 35vw;
  color: #fff;
}
#trailer{
  z-index: 2;
  margin-bottom: 0;
}
#trailer video {
  color: #000;
  width: 87.5%;
  position: relative;
  z-index: 0;
  margin-left: 6.25%;
  margin-right: 6.25%;
  top: -10px;
  margin-bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}


P.s. Знаю что много ненужного и лишнего кода, потом уберу
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
@Roman-T
Верстальщик
Привет! Глянул тут бегло и заметил следующее:
1. в примере не .trailer, а #trailer
2. Когда у .blackout left 0, то он всегда будет слева + еще margin-left 6.25%. (при ресайзе так и будет получаться - дочерний блок выходит за пределы родительского) Если хочешь центрировать, то надо left 50% ставить, а margin-left: -ширина дочернего блока. Я такое делал (но не прям так, на kansport.ru - блок качество и надежность)
3. По тексту не скажу, пример нужен.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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