На странице есть блок, который залезает под верхний блок. Т.е. красный налезает под черный. Как это было сделано: у красного блока position: relative , top: -50px и z-index: -1 . Теперь необходимо на красном блоке разместить кнопки, ссылки. Но т.к. у красного блока z-index: -1 , то кнопки не нажимаются. P.S. Красный обязательно должен быть фоном, а не картинкой. И кнопки должны располагаться внутри этого блока.
Отслеживать
user282693
задан 4 окт 2017 в 17:56
715 1 1 золотой знак 8 8 серебряных знаков 26 26 бронзовых знаков
Добавьте код или ссылку на сайт, так будет проще и правильный ответ получите быстрее)
10 авг 2018 в 7:21
Проблема тут с реализацией. В том, что нижний блок вообще налезает на верхний когда есть псевдоэлементы и бордеры
Техники наложения CSS
От автора: Есть несколько методов создания наложения: от использования абсолютно позиционированного элемента до контуров и псевдоэлементов. В этой статье мы собираемся исследовать стили каждой из методик со всеми их «за» и «против».
Дизайнерские шаблоны, набор лучших практик и методов, нацеленных на решение одной из самых распространенных «проблем» дизайна, обычно представлены в контексте дизайнерских принципов. Один из них – принцип «остаться на странице» (Stay On Page). Он базируется на том факте, что обновления страницы плохо действуют на мыслительные процессы пользователя, вызывая явление, известное как ослепление при смене, и нам нужно избегать визуальной перегрузки пользователя там, где и когда это возможно.
Мы можем разумно решить, когда следует удержать пользователя на странице, и смоделировать этот процесс. Один из способов оставить посетителя на одной странице – это постараться включить какие-то события в контекст текущей страницы, отобразив «мини страничку» или появляющийся диалог в слое поверх текущей страницы. Такой слой мы называем наложением или overlay.
Поверхностные наложения можно применять для того, чтобы задать вопросы, представить свойства, обозначить прогресс, дать инструкции или показать информацию. Их можно активировать напрямую действиями пользователя (например, щелкнув на действие, проведя мышью над объектами) или представить веб-приложениями на различных стадиях при завершении действия. — Дизайн веб-интерфейсов
Когда пользовательский интерфейс воспринимается только в появляющемся модальном окне, обычно применяется эффект Lightbox, а остальная страница затемняется, обозначая ее неактивность. Задача этого учебника – представить вам несколько методов, которые можно применить для создания затемняющего наложения с помощью CSS, и обозначить «за» и «против» каждой техники по мере их описания.
МЕТОД №1: АБСОЛЮТНО ПОЗИЦИОНИРОВАННЫЙ ЭЛЕМЕНТ
Первый способ создания наложения – абсолютное позиционирование на странице элемента HTML. В разметке будет пустой div, а с помощью CSS этот div абсолютно позиционируется и ему назначается болшое значение z-index для того, чтобы гарантировать, что он останется на странице поверх всех прочих элементов, кроме модального окна, открывающегося сверху этого наложения, которое получит еще более высокий z-index, чем оверлей.
Предположим, в нашу разметку уже добавлен пустой div, и ему назначен класс .overlay, а вот CSS для позиционирования этого наложения на странице:
html , body <
min - height : 100 % ;
position : relative ;
position : absolute ;
width : 100 % ;
height : 100 % ;
z - index : 10 ;
background - color : rgba ( 0 , 0 , 0 , 0.5 ) ; /*затемнитефон*/
Данный код очень прост, но при использовании этого способа нужно знать еще кое о чем.
Во-первых, убедитесь, что оверлей абсолютно позиционирован по отношению к body. Так что, если наложение, например, содержится в другом div’е и позиционирование этого другого div’а установлено на относительное, то оверлей будет позиционирован абсолютно относительно его контейнера, а не body. Поэтому вам нужно либо дать наложению возможность быть прямым подчиненным узлом body, или убедиться, что ни у одного из его дочерних элементов позиционирование не установлено на relative.
Кроме того, вам следует убедиться, что содержимое страницы растягивается до самого низа окна просмотра или ниже, потому что body увеличивается таким образом, чтобы соответствовать высоте своего содержимого (естественно, предположим, что контент не расположен абсолютно), а если содержимого недостаточно для того, чтобы растянуть высоту body до низа окна просмотра, то наложение, достигающее 100% высоты тела, так же не достигнет низа окна просмотра и, следовательно, не закроет его.
Что бы этого избежать и не беспокоиться о количестве контента на странице, а оверлей при этом закрывал бы все окно просмотра, вы должны установить высоту корневого элемента html и body. Однако помните при установке высоты элементов html и body:
Если вы назначаете элементу html высоту в 100% (100% высоты относительно окна просмотра) и назначаете body так же высоту в 100% (что высчитывается относительно коренного html), то устанавливаете высоту этих обоих элементов на 100% высоты окна просмотра, и следовательно, неважно насколько далеко простирается содержимое body, его высота остается равной высоте окна просмотра, и такой же будет высота наложения. В этом случае при прокрутке страницы вниз наложение станет прокручиваться вверх и вы увидите содержимое под ним без оверлея, как будто он обрезан.
Решение этой проблемы – установка минимальной высоты корневого элемента и body вместо установки значения высоты, что в большинстве ситуаций предпочтительнее. Установив минимальную высоту, вы гарантируете, что он станет достигать низа окна просмотра и будет увеличиваться по мере увеличения содержимого. И наконец, чтобы величина оверлея увеличивалась и растягивалась для покрытия всего контента при прокрутке страницы вы должны установить position:relative; к body для того, чтобы высота наложения растягивалась вместе с увеличением высоты тела.
Еще об этой методике следует заметить, что не следует пользоваться слишком высокими значениями z-index. Многие разработчики любят брать очень большие значения, вроде z-index: 999999; при позиционировании оверлея или любого другого элемента поверх других элементов страницы. Это не требуется. Чаще всего значения z-index равного 10, иногда даже меньше, достаточно для того, чтобы элемент на странице оставался поверх остальных. Вам лишь следует знать, что если другие элементы получают z-index, и таковые имеются, то просто установите z-index наложения больше самого высокого у прочих элементов.
И наконец, нужно также помнить, что при этом методе вы добавляете в свою разметку пустой div, и это, конечно, не семантично.
Преимущество этого способа в том, что он поддерживается во всех основных браузерах и даже старых, вплоть до IE8.
Я поместила пример на Codepen, чтобы вы могли протестировать результат этой техники. Попробуйтезаменить min-height в html и body на height, или удалить позиционирование relative из body и посмотреть, как при прокрутке оверлей обрезается внизу.
МЕТОД №2: ЭЛЕМЕНТ С POSITION FIXED
Второй способ добавления наложения очень похож на предыдущий, и в разметке используется тот же самый элемент .overlay, но вместо абсолютного позиционирования наложения вы назначаете ему фиксированное позиционирование и полную ширину и высоту для покрытия окна просмотра целиком. А так как в данном случае оверлей фиксирован, то в не зависимости от того, как далеко вниз вы прокручиваете, он будет оставаться на месте, покрывая всю область окна просмотра, а это именно то, что нам нужно.
Размещение элементов
С помощью свойств позиционирования Вы можете размещать элементы где пожелаете.
Местоположение элементов задается с помощью следующих CSS свойств:
top — устанавливает величину смещения текущего элемента от верхнего края родительского элемента;
bottom — устанавливает величину смещения текущего элемента от нижнего края родительского элемента;
left — устанавливает величину смещения текущего элемента от левого края родительского элемента;
right — устанавливает величину смещения текущего элемента от правого края родительского элемента.
Описанные выше свойства не вступят в силу пока Вы не зададите способ размещения. Также способ размещения определяет поведение данных свойств.
В CSS существуют 4 различных способа размещения элементов:
Статическое размещение
Статичные элементы всегда отображаются там, где они были объявлены. CSS свойства top, bottom, left и right не работают со статичными элементами.
Все элементы по умолчанию размещаются данным способом, но Вы также можете явно объявить элемент статичным с помощью position:static.
#pos1
Быстрый просмотр
Фиксированное размещение
Фиксировано размещенные элементы не изменяют своего местоположения даже при прокрутке окна браузера. К фиксировано размещенным элементам могут применяться CSS свойства top, bottom, left, right.
Элемент может быть объявлен фиксировано размещенным с помощью position:fixed.
#pos1
Относительное размещение
Относительно размещенные элементы размещаются относительно их обычной позиции.
Элемент может быть объявлен относительно размещенным с помощью position:relative.
Обратите внимание: элемент будет по прежнему занимать свою изначальную позицию.
#pos1
Быстрый просмотр
Абсолютное размещение
Абсолютно размещенные элементы располагаются относительно первого родительского элемента, способ размещения которого отличен от статического. Если такие элементы не были найдены, то элемент будет расположен относительно корневого элемента (html).
Иногда для того, чтобы добиться желаемого эффекта родительский элемент специально определяется как относительно размещенный с нулевым смещением.
Вы можете объявить элемент абсолютно размещенным с помощью position:absolute.
При применении свойств позиционирования элементы могут накладываться друг на друга. Свойство z-index позволяет установить какой элемент в случае наложения будет сверху, а какой снизу.
Элементы с большим значением свойства z-index располагаются выше других.
Обратите внимание: свойство z-index может принимать отрицательные значения.
#pos1 < z-index:10; >#pos2 < z-index:5; >#pos3
Связанные с размещением CSS свойства
Для того, чтобы узнать больше о желаемом свойстве щелкните на его название.
Сделайте сами
Задание 1 переместите геометрические фигуры в соответствующие им рамки с помощью свойств размещения.
CSS наложение: как написать текст на изображении
Ранее рассмотрели как написать текст на изображении в Фотошопе, теперь же время сделать это средствами CSS.
Благодаря тому, что мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого. В качестве примера возьмём светлый и темный прямоугольник:
Указав свойство position, мы не увидим изменений, но теперь светлый блок будет перемещаться в рамках тёмного благодаря свойствам left, top, right и bottom. Например, поместим светлый прямоугольник по центру тёмного
Вышеуказанные свойства могут принимать отрицательные значения. Тогда элемент выходит за границы тёмного прямоугольника.
position: absolute и position:relative
Поскольку HTML код веб-документа представляет из себя матрёшку, где один элемент находится внутри другого, то посмотрим на ситуацию в целом. Например, с четырьмя слоями. Точкой отсчёта для свойств top, bottom, right, left является граница родительского элемента с position не в значении static (по умолчанию).
Отрицательные значения смещают светлый блок на территорию другого контейнера. Но эту часть блока мы не увидим, коли будет добавлено свойство overflow: hidden.
position:relative; overflow: hidden;
Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.
Взаимодействие блока с position: absolute с другими элементами
Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать попутные свойства.
А
Б
Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует — он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством float: left, ни своей площадью, словно он парит над ним.
А
Б
Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.
Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index. Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство transform) и то, что в IE существует один изъян.
Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, transform: translate и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе CSS табы.
width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.
Блочный
Встроенный
Вст роен ный
Но не при position: absolute. Здесь блочный элемент не будет растягиваться на ширину родительского элемента. Зато встроенные элементы займут указанную ширину. Но на них по прежнему будут влияют такие свойства, как text-align (обратите внимание на эту статью).
.temnyi .svetlyi
Встроенный
Вст роен ный
width: 100%; для обоих — это ширина родителя, для которого задано позиционирование отличное от static.
Блочный
Встроенный
Вст роен ный
Если width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.
Блочный
Встроенный
Вст роен ный
Пример как написать текст на изображении.
Указанные ниже образцы продемонстрируют возможности применения CSS наложения.
Лес и поле белые, Белые луга. У осин заснеженных Ветки как рога.
Подо льдами крепкими Дремлют воды рек. Белыми сугробами Лег на крыши снег.
В небе звезды яркие Водят хоровод. Старый год прощается — Входит Новый год.
Пример как разместить текст поверх изображения на HTML
ЗАГОЛОВОКпрозрачная область
По материалам http://vagabundia.blogspot.com.
30 комментариев:
Евгений Xstroy Образец с вырастающей буквой порадовал. Уже как-то использовал слои для сбора шапки строительного сайта, но не думал таким образом их юзать. Спасибо за интересное решение. Анонимный Замечательная информация, большое спасибо автору. NMitra Благодарю за добрые слова! Анонимный ОГРОООМНОЕ Вам спасибо. NMitra Приятно слышать! Анонимный Замечательный блог. Рада, что его нашла. Особенно нравится манера изложения материала: систематизированно, коротко, четко и по теме — без этого словоблудия и надоевших вымученных шуточек, от которых уже подташнивает. Спасибо. NMitra Рада быть полезной. За собой стала замечать, что невольно начинаю копировать других блоггеров. Чур меня ))) Анонимный Спасибо большое многое помогло! Анонимный Спасибо за пост. Очень информативно! Еще раз спасибо 🙂 Анонимный Как же я рад, что попал на на эту статью! Пример с лошадью — это то, что мне было нужно, прямо точь в точь. Я очень счастлив! NMitra Значит примеры размещаю не зря))) Анонимный огромное спасибо очень нужный материал разложен по полкам, может я канешно и глупый вопрос задам но подскажите пожалуйста как выставить последний пример со всеми значениями в центральном положении благодарю за полезный материал NMitra Подправила код последнего примера прямо в статье. MIKTTD Во первых — Спасибо за шпаргалку! В предпоследнем примере зум буквы «а» не работает, поправьте пожалуйста (самому знаний не хватает). И еще там-же для ІЕ нужно добавить: «transform: skew(20deg)». NMitra Поправила, когда писала статью, о поддержке IE можно было только мечтать. Сейчас можно применить префикс -ms- Анонимный Почему то не работает в IE всплывающий текст. Как можно решить? Спасибо за помощь. NMitra В каком именно примере? Анонимный Спасибо большое Анонимный Самое толковое о position из всего, что я до сих пор встречал. Анонимный ужасное решение некорректно работающее в ИЕ Анонимный Спасибо за работу, достойное изложение, в закладки NMitra Благодарю за отзывы! Николай Березин четкое, предельно ясное изложение, лайк и в закладки! NMitra Спасибо! Юля Шикарный пост. Спасибо. Очень долго искала как наложить текст на картинку.. кучу сайтов пересмортрела.. то css, то php надо править, то все вместе. километры кодов и непонятно будет ли толк.. А тут все быстро и просто . Жаль что сразу не нашла эту статью))) NMitra Спасибо! Такие комментарии помогают находить силы и время, а главное желание на дальнейшее ведение блога! Сергей Ожерельев Спасибо. Никак не мог понять, как наложить слой на слой NMitra Рада помочь! Unknown А в масштабируемой картинке как сделать текст, чтобы он масштабировался вместе с картинкой на резиновом шаблоне? NMitra Пример: https://jsfiddle.net/kdtok1au/
