Я не очень понимаю что вам нужно. Покажите что вы имеете ввиду под "фото поверх текста". И покажите ваш код на codepen, где видно как вы пытаетесь решить задачу.
misha979797, если вам нужно чтобы текст h4 был на фоне картинки, тогда не нужно добавлять в html-разметку img. В стилях добавьте тегу h4 свойство «background-image» и путь к картинке.
Дима Волков, не за что, обращайтесь )
Ещё пара советов, если не возражаете: в подобных задачах старайтесь использовать относительные величины, у варианта “right: -1000px” в последствии может вылезти гораздо больше неожиданных сюрпризов, чем у “right: -100%” :)
А в идеале подобную позиционку вообще лучше делать через “transform”, т.к во время анимации через свойства position перерисовывается пол-страницы, а если анимировать transform, то перерисовывается только нужный объект.
И не стоит использовать float (кроме тех моментов когда нужно действительно задать обтекание), тем более что это свойство в связке с position все равно игнорируется :)
Удачных изысканий)
Андрей Dobrin, если у вас не шибко требовательный по кроссбраузерности проект, то эту стрелочку ещё можно сделать через clip-path, вот поиграйтесь тут: bennettfeely.com/clippy , крайне удобная вещь для подобных задач.
Александр Коновалов: тогда вот вам схема:
1. Верстайте блок, фиксируйте его у края окна.
.chat {
position: fixed;
right: -350px; (в зависимости от того какой ширины ваш блок, разумеется. Вам нужно задать отрицательное значение чтобы блок был скрыт за пределами экрана и видна была только кнопка вызова)
transition: all 1s linear; (этим мы говорим что изменять свойства блока нужно плавно) }
Потом создаёте доп. класс
.is-active {
right: 0; }
И пишите небольшой скрипт, с похожим условием:
(".кнопка").по клику { (".чат").добавить клиссс ("is-active")
