Как отцентрировать блок поверх видео?

Question

[Eugene Chefranov]

Подскажите, как можно отцентрировать блок #myblock поверх видео?

<div id="trailer" class="is_overlay">
	<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
		<source src="http://5thedgestudio.at.ua/img/back.mp4"></source>
	</video>

</div>
    <div id="myblock">
    Мои любые данные
    </div>

.is_overlay{ display: block; width: 100%; height: 100%; }
#trailer {position: fixed;top: 0; right: 0; bottom: 0; left: 0;overflow: hidden;;}
#trailer > video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:-1000;}
@media (min-aspect-ratio: 16/9) {#trailer > video { height: 300%; top: -100%; }}
@media (max-aspect-ratio: 16/9) {#trailer > video { width: 300%; left: -100%; }}
/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
@supports (object-fit: cover) {#trailer > video {top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;}}
#myblock {margin: 0 auto;width:1000px;z-index:9999;}

Сейчас блок #myblock даже поверх не отображается :(

Answer 1

[Алексей Зуев]

jsfiddle.net/yurzui/h184Ly1b/

Comments

[Eugene Chefranov]

Все хорошо, но когда добавляю блоки внутрь блока popup-inner, то мои блоки наезжают друг на друга, а не начинаются с новой строки. https://habrastorage.org/files/74d/d5d/929/74dd5d9...

[Алексей Зуев]

Евгений Чефранов: у меня наезжают? добавьте в моем примере и покажите

[Eugene Chefranov]

С наездом вроде разобрался добавив margin к своим внутренним блокам. А как блок popup можно смещать по высоте или ширине? Мне например надо немного выше все это поднять. Заранее благодарен!

[Eugene Chefranov]

Алексей Зуев: вот как у меня без margin https://jsfiddle.net/Chefranov/ep3yshj3/

[Алексей Зуев]

Евгений Чефранов: ссылка #mplink наезжает у вас, потому что она инлайн. Добавьте ей inline-block

[Eugene Chefranov]

Алексей Зуев: А как блок popup можно смещать по высоте или ширине? Мне например надо немного выше все это поднять. Заранее благодарен!

[Алексей Зуев]

Евгений Чефранов: Для popup-inner либо отрицательный margin, либо отрицательный traslateY или translateX для сдвига по ширине

[Eugene Chefranov]

Алексей Зуев: спасибо!

Answer 2

[Иван]

Сначала нужно взять все это в общий блок, потом поднять блок #myblock с помощью z-index присвоим ему position: relative и от центровать блок с помощью margin: 0 auto. Или просто текст выровнять по центру.

Comments

[Eugene Chefranov]

Сделал как вы сказали, но по центру не выходит, сместилось немного от левого края (процентов на 10) https://habrastorage.org/files/dbc/459/95e/dbc4599...

[Иван]

#myblock присвойте width: 100%И попробуйте сделать text-algin: center

[Максим Тимофеев]

Надо родитель растянуть, например с помощью clear:both; или задать ему размеры фиксированные. У Вас видимо детки выскакивают из родителя, так как попадают в float поток, а от не растягивает релятивного предка.

Answer 3

[Сергей Вушняков]

не слабый z-index:9999

Вот попробуй так
html

<div>
    <div class="one"> <!-- картинка -->
        
    <div class="two">Твой текст</div>
    </div>
   
</div>

css

.one {
  
     background: #aaa;
     width: 200px;
    height: 200px;
}

.two {
    width: 100px;
    height: 100px;
    margin-left:50px;
    padding-top:50px;
    background: #ccc;
    text-align: center;
}