Как переопределить видео поверх текста в CSS?

Question

Я работаю на скрипке

Я хочу переопределить видео поверх текста. HTML-код, который я использовал для создания видео / текста:

<div class="player-elements">
  <div class="grid-stack">
    <iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
  </div>   
</div>

<div class="hello-world" style="">
  <p>Hello World</p>
</div>

Мне интересно, какие изменения я должен внести в CSS, чтобы видео попало поверх текста "Lorem ipsum dolor sit amet, consectetur adipiscing.".

Я попытался добавить position:relative ,position:absolute and z-index, но почему-то это не сработало.

Answer 1

Каждая страница состоит из стека элементов. z-index - это способ, которым мы можем добавить слой в этот стек. Чтобы создать еще один стек, нам нужно нарочно установить позицию на fixed, absolute или relative.

проверьте этот SO-ответ для более подробного ответа на это.

z-index значения могут быть отрицательными или положительными, но значение по умолчанию равно 0.

Различные типы CSS positions являются

Относительная. Этот тип позиционирования, вероятно, является наиболее запутанным и неправильно. Что это на самом деле означает «по отношению к себе». Если вы установите положение: относительное; на элемент, но не другие атрибуты позиционирования (сверху, слева, снизу или справа), это не повлияет на его положение в все, это будет точно так же, как если бы вы оставили его как позицию ...

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

Исправлено. Этот тип позиционирования довольно редко, но, безусловно, имеет свои использует. Элемент с фиксированной позицией позиционируется относительно области просмотра, или само окно браузера ....

Вы можете прочитать больше Здесь

.hello-world{
  position: fixed;
  z-index: 1;
  
}

.player-elements{
  position: fixed;
  z-index: 2;
  
}

<div class='container'>
    <div class="player-elements">
       <div class="grid-stack">
         <iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
      </div>   
   </div>

    <div class="hello-world" style="">
      <p>Hello World</p>
    </div>
</div>

Попробуйте это fiddle фрагмент не запускает видео на YouTube.

Answer 2

Сначала вам нужно научиться работать со спект-элементом: D, после этого вы можете выполнять свою работу даже при попытках поймать

z-индекс для имплантата к элементу нуждается в позиции

так что, как вы можете видеть, это исправлено http://jsfiddle.net/1hz8v4qc/43/

.player-elements {
   z-index: 100;
   position:relative;
}

.hello-world 
{
  text-align: center;
  font-size: 50px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
}

Удачи

Answer 3

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

.grid-stack{
position: absolute;
}
.hello-world {
position: absolute;
}