Изображение не будет плавать: прямо на экран из-за наложения и видео фона - PullRequest
Новая
       12

Изображение не будет плавать: прямо на экран из-за наложения и видео фона

0 голосов
/ 21 июня 2019

У меня есть фоновое видео, и у меня были проблемы с размещением текста / элементов поверх него, поэтому я создал наложение. Это помогло мне в краткосрочной перспективе, но теперь я не могу заставить элемент изображения «прилипать» вправо. Я хочу, чтобы он придерживался вправо независимо от ширины устройства.

Я пытался сделать float: правильно; Это может быть проблемой с родительским контейнером, но я попытался перетащить # logo-image за пределы .videoContainer, но он больше не накладывался поверх видео.

Я попробовал положение: абсолютное; и изменение положения сверху и слева - однако это не помогает мне удерживать его справа.

HTML 

  <div class="row">
    <div class="twelve columns">
      <div class="videocontainer">
        <video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%" id="homeVideo">
          <source src="photo/water.mp4" type="video/mp4">
        </video>

        <h1>
          <img id="logo-image" src="photo/logo.png" align="right" alt="logo">
        </h1>
        <div data-sr class="overlay">
        <h2 id="mantra"> &oline;&oline;&oline;&oline;&oline;&oline;&oline;&oline; <br><br> 
          This is the mantra<br>
        </h2>
        </div>
      </div> 
    </div>
  </div>
</section>

CSS 

.videocontainer { 
    position:relative; 

  }
.videocontainer video {
    position:relative;
    z-index:0;
}

#homeVideo {
  position: relative;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

@media only screen and (min-width: 1200px) {
  .overlay {
    width:100%;
    height: 100%;
    position: absolute;
    z-index:1;
  } 

#logo-image {
   float: right;
   overflow: hidden;
   width: 700px;
   height: 200px;
   margin: 5px 5px 5px 5px;
}

#mantra {
  margin-left:90%;
  font-size:2vw;
  width: 50%;
  padding-top: 0px;
}

}

Я ожидаю увидеть элемент # logo-image с плавающей справа. Если я перетаскиваю ширину экрана, я хочу, чтобы он все еще застрял вправо.

...