Как сделать чтобы элемент был поверх всего html

Наложение и порядок слоёв

На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

     .card IMG < position: relative; >.seven < left: -120px; top: 25px; >.ace  
  
  

В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

.card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2; >.ace

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

     .card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2;>.ace < left: -295px; z-index: 1; >.card IMG:hover  
  
  

Наложение объектов

Очень важный момент, состоит в том, что z-index работает корректно только для элементов на одном уровне и с одинаковым набором свойств. Например элементы position:static и position:absolute имеют разную иерархию z-index Отдельные иерархии у элементов с float и opacity

Хак: Как переместить вложенный блок под родительский? По умолчанию вложенный блок всегда над. Но это можно изменить

.wrapper < position: relative; > .child < position: relative; z-index: -1; > 

Обратите внимание, что для родителя z-index в этой ситуации ставить не нужно!

transition для z-index

Для z-index работает плавное изменение с помощью transition. Это можно использовать для появления элементов с разной скоростью.

opacity — задает полупрозрачность блока. 0 — полностью прозрачный блок, 1 — не меняет прозрачность блока, то есть непрозрачный блок остается непрозрачным.

div < opacity: 0.5; > 

Непрозрачность у вложенных элементов нельзя восстановить. То есть, если родитель полностью прозрачный, то и ребенок тоже всегда будет прозрачным.

То есть, если у нас два блока, один из которых вложен в другой, например так

div class="parent"> div class="child"> div> div> 

и если мы зададим стили следующим образом

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:1; width:200px; height:200px; background-color:orange; > 

То у вложенного блока opacity всё-равно будет 0.5, то есть opacity вложенных блоков перемножаются.

Но если opacity больше единицы, то оно приводится к единице. То есть пример ниже будет аналогичен по внешнему виду примеру выше.

.parent < opacity:0.5; width:200px; height:200px; background-color:darkolivegreen; > .child < opacity:2; width:200px; height:200px; background-color:orange; > 

visibility — определяет будет ли показываться элемент visible — элемент виден hidden — элемент скрыт

Отличие visibility:hidden от display:none в том, что блок будет попрежнему занимать место, хотя мы его не будем видеть. При display:none блок просто исчезнет со страницы

overflow — определяет что именно будет происходить с контентом, выходящим за пределы блока.

По умолчанию у объектов стоит значение visible

hidden — скроет все выступающие элементы
scroll — добавит в блок скроллинг. Не самое популярное решение, так как скроллинг уменшит область под контент.

div < width: 150px; height: 150px; overflow: scroll; > 

Хак: Если у Вас margin-top вложенного блока переходит на родительский, то overflow:hidden у родительского блока, блокирует выход margin’a за пределы блока, и всё начинает работать так, как Вы этого ожидаете.

Хак: Если родительский блок «не замечает» вложенные float элементы, например высота height:auto у родительского элемента преобразуется в 0, то overflow:hidden у родительского блока также решает эту проблему.

Оверлеи

Оверлей — это блок, который накладывается на весь экран. Все знакомы с оверлеями по раздражающему затемнению экрана, на котором выводится рекламный банер.

Рассмотрим один из способом создания оверлея

.overlay < width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; top:0px; left:0px; z-index:10; > 

Нам нужно, чтобы затемнение закрыло весь экран, соответственно выставляем ширину и высоту во весь экран.

 height:100%; width:100%; 

Фоновый цвет делаем черным, но полупрозрачным.

 background-color:rgba(0,0,0,0.5) 

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

 position:fixed; top:0px; left:0px; 

Наш оверлей всегда должен быть поверх всего остального, поэтому выставляем z-index большим.

 z-index:10 

Ромб с фоновой картинкой

Поворачиваем квадрат с помощью трансформации на 45 градусов.

Вложенную картинку поворачиваем на -45 градусов

Фильтры

Полезное чтиво:

1. Четыре техники создания оверлеев http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Практика:

1. Два блока пересекаются. Сделать два варианта наложения одного блока на другой
2. Создание блока с полупрозрачным фоном и непрозрачным текстом. Фон — фотография
3. Создать оверлей поверх сайта
4. При наведении на блок, на нем последовательно появляются блоки(transition для z-index)
5. Наводим на блок и из него плавно выезжает меню
6. При наведении на гиперссылку, вокруг нее возникает выделение. Выделение должно собираться из окружающегося пространства. Пример http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
7. Верстка сайта с контентом в виде ромбиков (используем трансформации и position)
8. Сделать слайдер. Картинки меняются при наведении на навигационные кружочки
9. При наведении мышки на блок, фон, на котором он стоит размывается.
10. Есть фотография цветного товара, на однородном сером фоне. И есть цветные квадратики. При наведении на квадратик, товар окрашивается в цвет квадрата.
11. К низу сайта добавлен ярлык. При наведении на ярлык, всплывают пункты меню(подобно интерфейсу на мак)

results matching » «

No results matching » «

Как сделать чтобы элемент был поверх всего html

Подскажите как это сделать ?

Подобное не помогает ..

автор: GeorgeIV (02.07.2009 в 15:45) письмо автору

его z-Index должен быть больше z-Index других контейнеров, и неважно где он будет располагаться (естественно не после )

автор: sidPR (02.07.2009 в 15:47) письмо автору

в том то и задача страница уже сгенерированна и закрыта блоками и есть только 2 варианта либо поверх либо внизу когда вставляемой страницы интегрировать какойто объект который будет поверх всего .. возможно на JS создовать динамически =\ ..
Подкиньте идею

автор: sl1p (02.07.2009 в 17:01) письмо автору

автор: GeorgeIV (02.07.2009 в 18:54) письмо автору

вы как то неправильно понимаете «сверху» и «снизу» страницы, это не значит до или после тегов . Если сервер ваш, то и код можете вставить, если собираетесь над чужой страницей, к формированию которой не доступа, то как же собираетесь ява-скрипт туда вставлять?

position

Свойство CSS position указывает, как элемент позиционируется в документе. top , right , bottom и left (en-US) определяют конечное местоположение позиционированных элементов.

Интерактивный пример

Типы позиционирования

• Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative , absolute , fixed либо sticky . (Другими словами, это все, кроме static .)
• Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative . Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left (en-US) и right задают горизонтальное смещение.
• Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed . top , right , bottom и left (en-US) задают смещения от краёв содержащего блок элемента . (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
• Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto ) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока .

В большинстве случаев абсолютно позиционированные элементы, которые имеют height и width установленные в auto , имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top , так и bottom , и оставляя height неопределённым (то есть , auto ). Ими также можно заполнить доступное горизонтальное пространство, указав как left (en-US), так и right , и оставляя width как auto .

За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

• Если указаны top и bottom (технически, не auto ) — приоритет будет у top .
• Если указаны left и right : приоритет будет у left , когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right , когда direction является rtl (персидский , Арабский, иврит и т. д.).

Синтаксис

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top , right , bottom , left и z-index не применяются к данному элементу. Это значение по умолчанию.

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top , right , bottom и left . Смещение не влияет на положение любых других элементов, то есть пространство, выделяемое для элемента в макете страницы, такое же, как если бы позиция была static . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Его влияние на элементы table-*-group , table-row , table-column , table-cell и table-caption не определено.

Элемент удаляется из обычного потока документа, и для элемента в макете страницы не выделяется дополнительное пространство. Он располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного содержащего блока . Его конечная позиция определяется значениями top , right , bottom , и left . Это значение создаёт новый контекст наложения , когда значение z-index не auto . Внешние отступы абсолютно спозиционированных блоков не схлопываются с отступами других блоков.

Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного содержащего блока , установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform , perspective , или filter , установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter , способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top , right , bottom и left . Это значение всегда создаёт новый контекст наложения . При печати fixed -элемент помещается в одно и то же место на каждой странице.

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый контекст наложения . Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden , scroll , auto или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Формальный синтаксис

position =
static | (en-US)
relative | (en-US)
absolute | (en-US)
sticky | (en-US)
fixed | (en-US)
running( )

Примеры

Относительное позиционирование

Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.

HTML

div class="box" id="one">Onediv> div class="box" id="two">Twodiv> div class="box" id="three">Threediv> div class="box" id="four">Fourdiv> 

CSS

.box  display: inline-block; width: 100px; height: 100px; background: red; color: white; > #two  position: relative; top: 20px; left: 20px; background: blue; > 

Абсолютное позиционирование

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static ). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок — см. также определение W3C), который содержит блок корневого элемента документа.

h1>Абсолютное позиционированиеh1> p> Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня. p> p class="positioned"> По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы. p> p> Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих. p> p> встроенные элементы span>как этотspan> и span>вот этотspan> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов span >перейдёт на новую строку, если это возможно, - как содержимое этого текстаspan >, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

Фиксированное позиционирование

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform , perspective , или свойства filter , отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id=»one» фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

HTML

div class="outer"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. p> div class="box" id="one">Onediv> div> 

CSS

.box  background: red; width: 100px; height: 100px; margin: 20px; color: white; > #one  position: fixed; top: 80px; left: 10px; > .outer  width: 500px; height: 500px; overflow: scroll; padding-left: 150px; > 

Липкое позиционирование

Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например.

#one  position: sticky; top: 10px; > 

. позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Типичное использование для липкого позиционирования — для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

Вы должны указать порог с по крайней мере одним из top , right , bottom , или left (en-US) для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.

HTML

div> dl> dt>Adt> dd>Andrew W.K.dd> dd>Apparatdd> dd>Arcade Firedd> dd>At The Drive-Indd> dd>Aziz Ansaridd> dl> dl> dt>Cdt> dd>Chromeodd> dd>Commondd> dd>Convergedd> dd>Crystal Castlesdd> dd>Cursivedd> dl> dl> dt>Edt> dd>Explosions In The Skydd> dl> dl> dt>Tdt> dd>Ted Leo & The Pharmacistsdd> dd>T-Paindd> dd>Thricedd> dd>TV On The Radiodd> dd>Two Gallantsdd> dl> div> 

CSS

*  box-sizing: border-box; > dl  margin: 0; padding: 24px 0 0 0; > dt  background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px Helvetica, Arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; > dd  font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; > dd + dd  border-top: 1px solid #ccc; > 

Доступность

Убедитесь, что элементы, расположенные с absolute или fixed значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.

• MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
• Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

Производительность и доступность

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

Характеристики

Specification
CSS Positioned Layout Module Level 3 # position-property

Совместимость с браузером

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 18 окт. 2023 г. by MDN contributors.