Управление положением текста при позиционировании

Я стараюсь, чтобы в полноэкранном режиме отображался код following. Я не хочу ограничивать видео, придавая ему высоту, поскольку она отзывчива, но содержимое или выше, расположенное над ним, толкает вниз, когда я просматриваю его на маленьком экране, например. Mobile Как я могу убедиться, что текст над видео отображается в том же положении, даже когда экран небольшой, а текст или панель под ним также скрываются или скрываются/перекрываются видео.Управление положением текста при позиционировании

Я хочу, чтобы текст на видео и ниже был приличным, а не прыгал или скрывался. Я неправильно использую позиции?

.centered{ 
    position: relative; 
    top:50%; 
    z-index: 1; 
    color:#fff; 
    text-shadow:1px 1px 10px #000; 
} 
video{ 
    background-size:cover; 
    width: 100%; 
    position: absolute; 
    top:0; 
}

источник

2017-01-20 Nofel

_ «где тело будет позиция: относительная, поэтому я дал позиции видео элемента: абсолютные» _ - Зачем? Что одно имеет отношение к другому? – CBroe

@CBroe Я хочу, чтобы элемент видео сидел слева: 0 и сверху: 0, так что это будет относительно тела? – Nofel

Зачем нужно абсолютное позиционирование? Если вы поместите его как первый элемент в тело, то все, что вам нужно сделать, это исключить по умолчанию поля/paddings, которые могут быть применены через таблицу стилей браузера. – CBroe

Убедитесь, что родительский элемент имеет position: relative; и содержит видео, а родитель регулирует ответно с видео. Я делаю это, получая соотношение сторон видео и создавая отступы (56,2%), которые создают пространство для соотношения сторон видео (с использованием метода от iframe section here), затем помещают текст в этот родительский элемент и используют комбинацию position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); для центрируйте текст над видео.

* {margin:0;padding:0;} 
 

 
#video { 
 
    height: 0; 
 
    padding-top: 56.2%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#video video { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    background: url(polina.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#video h1 { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    color: #fff; 
 
    text-shadow: 1px 1px 10px #000; 
 
    font-size: 36px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
}

<div id="video"> 
 
    <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop=""> 
 
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> 
 
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
 
    </video> 
 
    <h1>We Evolve with our students 
 
</div>

источник

2017-01-23 18:09:48

Мой текст в моем случае глификон-игровой круг будет не выровнять, а переместить себя в соответствии с экраном на позиции сверху основе, вы, кажется, работает нормально. Это из-за текста и глификона. – Nofel

@Nofel Я не уверен, что вы имеете в виду. Можешь ли ты показать мне? –

Я создал новое сообщение с моим [исходным кодом] (http://stackoverflow.com/questions/41841065/video-wont-play-after-first-time-playing) – Nofel

Возможно, введите текст внутри абзаца?

http://codepen.io/anon/pen/NdpyVX

<section class="vid"> 
<video controls poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.ogg" type="video/ogg"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.webm" type="video/webm"> 
    Your browser does not support the video tag or the file format of this video. <a href="http://www.webestools.com/">http://www.webestools.com/</a> 
</video> 

<div class="intro"> 
    This is something cool for kids who want to watch videos 
</div> 
</section>

источник

2017-01-20 12:31:30

Вот CSS для DIV с centerred класса. Надеюсь, что это поможет вам. изменить положение к абсолютной и использовать функцию известково расположить текст по центру с сверху

.centered 
{ 
position: absolute; 
top: calc(100% - 50%); 
text-align : center; 
left : 0; 
right : 0; 
z-index: 1; 
color:#fff; 
text-shadow:1px 1px 10px #000; 
}

источник

2017-01-23 16:13:42

Я думаю, что это link поможет вам о сосредоточении ничего;) О тексте определения местоположения, вы можете использовать vh значение. То есть.

.text { 
    position: absolute; 
    top: 30vh 
}

Кроме того, this guy from the top есть хороший пример относительно абсолютного позиционирования;)

Link о vh

источник

2017-01-24 18:57:33 Darex1991

Управление положением текста при позиционировании

ответ

Смежные вопросы