Как поставить блок на передний план блока css

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index . Это свойство работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Синтаксис

z-index: число | auto | inherit

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index , на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index , но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    z-index #layer1, #layer2, #layer3, #layer4 < position: relative; /* Относительное позиционирование */ >#layer1, #layer3 < font-size: 50px; /* Размер шрифта в пикселах */ color: #000080; /* Синий цвет текста */ >#layer2, #layer4 < top: -55px; /* Сдвигаем текст вверх */ left: 5px; /* Сдвигаем текст вправо */ color: #ffa500; /* Оранжевый цвет текста */ font-size:70px; /* Размер шрифта в пикселах */ >#layer1 < z-index: 2; >#layer2 < z-index: 1; >#layer3 < z-index: 3; >#layer4 Слой 1 наверху
  Слой 4 наверху

Результат данного примера показан на рис. 1.

Применение свойства z-index

Рис. 1. Применение свойства z-index

Объектная модель

[window.]document.getElementById(» elementID «).style.zIndex

Браузеры

Список, созданный с помощью тега , в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

Как поставить на передний план этот блок?

На странице магазина этого сайта — https://promokodem.ru/shops/oldi/ есть такое окно вопроса. Там есть небольшой информативый текст. Он открывается при наведении курсора на знак вопроса.

Проблема в том, что когда этот блок открывается. То кнопка «Показать код» показывается поверх этого информативного окна.

1. Как убрать этот баг, чтобы кнопка «Показать код» была на заднем плане.

2. Можно ли расширить это окно?)

Вопрос задан более трёх лет назад
751 просмотр

Как вывести блок на передний план?

Подскажите плиз, что сделать, чтобы они были впереди и без прокрутки?

Вопрос задан более трёх лет назад
415 просмотров

Комментировать
Решения вопроса 1

Vlad_IT

Владимир Проскурин @Vlad_IT Куратор тега CSS
Front-end разработчик

У блока #comment-box уберите overflow: hidden

#comment-box< border: 1px solid #ccc; margin-bottom: 15px; position: relative; overflow:hidden; /* он мешает */ clear: both; >

т.е. это свойство скрывает все, что вылезает за пределы блока.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
referakk @referakk Автор вопроса

Спасибо, помогло.
Не подскажете еще, как убрать прокрутку, чтоб блок адаптировался под количество самйликов?

WebGL текст — HTML

Эта статья продолжает серию статей о WebGL. Если вы их ещё не читали, предлагаю начать отсюда, а затем вернуться сюда.

Один из распространённых вопросов — «как добавить текст в WebGL». Сначала следует спросить себя о цели отрисовки текста. Вы работает в браузере, он и занимается отображением текста. Поэтому первый ответ на ваш вопрос — использовать HTML для отображения текста.

Для начала рассмотрим простейший пример. Вы просто хотите отобразить текст сверху вашего WebGL. Можно назвать его накладным текстом. По сути это текст, который не меняет своего положения.

Простым подходом будет использование HTML-элемента (или элементов) и CSS, чтобы текст расположился сверху.

Например, сделаем контейнер, куда поместим и canvas, и HTML, который наложится поверх canvas.

Time: Angle:

Далее добавим CSS, чтобы canvas и HTML пересекались друг с другом.

.container < position: relative; >#overlay

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

// получаем ссылки на элементы DOM var timeElement = document.querySelector("#time"); var angleElement = document.querySelector("#angle"); // создаём текстовые узлы, чтобы сэкономить немного браузерного времени var timeNode = document.createTextNode(""); var angleNode = document.createTextNode(""); // добавляем текстовые узлы в нужные места timeElement.appendChild(timeNode); angleElement.appendChild(angleNode);

Наконец, обновляем текстовые узлы при рендеринге

function drawScene() < . // преобразуем значение поворота из радиан в градусы var angle = radToDeg(rotation[1]); // сообщаем только в диапазоне 0 - 360 angle = angle % 360; // задаём значения узлов angleNode.nodeValue = angle.toFixed(0); // без десятичных знаков timeNode.nodeValue = clock.toFixed(2); // 2 десятичных знака

И вот результат

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

timeNode.value = "Time " + clock.toFixed(2);

Также я использую текстовые узлы через вызов node = document.createTextNode() , затем присваиваю значение через node.nodeValue = someMsg . Я мог бы использовать someElement.innerHTML = someHTML . Такой подход был бы более гибким, потому что он позволяет использовать произвольный HTML, однако, он будет работать немного медленнее, так как браузеру необходимо создавать и уничтожать узлы при каждой смене содержимого. Что выбрать - решать вам.

Важный момент, который стоит вынести из техники наложения, это то, что WebGL работает в браузере. Не забывайте использовать возможности браузера. Большинству программистов OpenGL приходится отрисовывать каждую часть своих приложений с нуля своими силами, но браузер содержит массу готовых элементов, которые стоит использовать в своих приложениях WebGL. У такого подхода масса преимуществ. Например, можно использовать стили CSS для получения наложения.

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

Следующая часто используемая возможность - позиционирование текста относительно сцены. Мы также можем сделать это с помощью HTML.

Для этой задачи мы снова будем использовать контейнер с canvas и ещё одним контейнером для смещающегося элемента HTML.

 Настроим CSS

.container < position: relative; overflow: none; width: 400px; height: 300px; >#divcontainer < position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; overflow: hidden; >.floating-div

Стиль position: absolute; позволяет задавать положение элементу #divcontainer относительно первого родителя со стилем position: relative или position: absolute . В этом случае им является контейнер, в котором находятся и canvas, и #divcontainer .

Стиль left: 0px; top: 0px выравнивает #divcontainer относительно всего остального. z-index: 10 выводит контейнер на передний план перед canvas. А overflow: hidden обрезает дочерние элементы, которые не помещаются в контейнер.

Наконец, .floating-div будет использован для плавающего элемента div.

Нам осталось получить ссылку на divcontainer, создать div и добавить его.

// получаем ссылку на divcontainer var divContainerElement = document.querySelector("#divcontainer"); // создаём div var div = document.createElement("div"); // назначаем ему класс CSS div.className = "floating-div"; // создаём текстовый узел для содержимого var textNode = document.createTextNode(""); div.appendChild(textNode); // добавляем элемент в divcontainer divContainerElement.appendChild(div);

Теперь мы можем позиционировать div через стили.

div.style.left = Math.floor(x) + "px"; div.style.top = Math.floor(y) + "px"; textNode.nodeValue = clock.toFixed(2);

И у нас получился пример с div, отскакивающим от стен.

Предположим, что теперь нам нужно закрепить текст за конкретным участком 3D-сцены. Как это сделать? Точно так же, как и в статье о проекционной перспективе.

В том примере мы узнали, как использовать матрицы, как их умножать и как применять проекционную матрицу для конвертации в пространство отсечения. В нашем шейдере мы умножаем вершины на матрицы, и координаты преобразуются из локального пространства в пространство отсечения. Нам по силам выполнить всю математику через JavaScript. Затем мы сможем перевести координаты из пространства отсечения (от -1 до +1) в пиксели, которые в свою очередь сможем использовать для позиционирования div.

gl.drawArrays(. ); // мы только что вычислили матрицу для отрисовки буквы F в 3D // выбираем точку в локальном пространстве буквы 'F' // X Y Z W var point = [100, 0, 0, 1]; // это верхний правый угол фронтальной части // вычисляем координаты пространства отсечения, // используя матрицу, которую мы вычисляли для F var clipspace = m4.transformVector(matrix, point); // делим X и Y на W аналогично видеокарте clipspace[0] /= clipspace[3]; clipspace[1] /= clipspace[3]; // конвертация из пространства отсечения в пиксели var pixelX = (clipspace[0] * 0.5 + 0.5) * gl.canvas.width; var pixelY = (clipspace[1] * -0.5 + 0.5) * gl.canvas.height; // задаём положение div div.style.left = Math.floor(pixelX) + "px"; div.style.top = Math.floor(pixelY) + "px"; textNode.nodeValue = clock.toFixed(2);

И вуаля! Верхний правый угол нашего div расположен точно в верхнем правом углу фронтальной части буквы F.

Если мы хотим больше надписей - используем больше элементов div.

Можете посмотреть исходный код последнего примера для подробностей. Важно сказать, что я просто предполагаю, что создание, добавление или удаление элементов HTML из DOM является медленным, поэтому в примере выше элементы создаются только один раз. Неиспользуемые элементы только скрываются, но не удаляются из DOM. Вам придётся самим провести тестирование производительности, чтобы узнать, какой из подходов быстрее. Просто я для себя выбрал такой подход.

Надеюсь, вам понятно, как использовать HTML для текста. Далее рассмотрим Canvas 2D в качестве надписи.

Основы
- Основы WebGL
- Как работает WebGL
- Шейдеры и GLSL в WebGL
- WebGL State Diagram
- Обработка изображений в WebGL
- Продолжаем обработку изображений в WebGL
- 2D-перенос в WebGL
- 2D-поворот в WebGL
- 2D-масштабирование в WebGL
- 2D-матрицы в WebGL
- WebGL 3D - Ортогональ
- WebGL 3D - Перспектива
- WebGL 3D - Камеры
- WebGL 3D - Направленное освещение
- WebGL 3D - Точечное освещение
- WebGL 3D - Прожектор
- WebGL - Меньше кода, больше веселья
- WebGL - Отрисовка нескольких объектов
- WebGL - Графы сцены
- WebGL 3D - Создание модели
- Loading .obj files
- Loading .obj w .mtl files
- WebGL 3D - Текстуры
- WebGL - Данные для текстур
- WebGL - Использование 2 и более текстур
- WebGL - Кросс-доменные изображения
- WebGL 3D - Перспективная коррекция текстур
- Planar and Perspective Projection Mapping
- WebGL - Рендеринг в текстуру
- Shadows
- 2D
  - WebGL 2D - DrawImage
  - WebGL 2D - Стек матриц
  - Sprites
  - Cubemaps
  - Environment maps
  - Skyboxes
  - Skinning
  - Fog
  - Picking (clicking on stuff)
  - WebGL текст - HTML
  - WebGL текст - Canvas 2D
  - WebGL текст - Используем текстуру
  - WebGL текст - Используем глиф-текстуру
  - Ramp Textures (Toon Shading)
  - GPGPU
  - Smallest Programs
  - Drawing Without Data
  - Shadertoy
  - Pulling Vertices
  - Indexed Vertices (gl.drawElements)
  - Instanced Drawing
  - WebGL Установка и настройка
  - Шаблон WebGL
  - Изменение размера Canvas в WebGL
  - WebGL - Анимация
  - Points, Lines, and Triangles
  - Multiple Views, Multiple Canvases
  - Visualizing the Camera
  - WebGL и прозрачность
  - WebGL - 2D и 3D библиотеки
  - WebGL - Антипаттерны
  - WebGL Matrices vs Math Matrices
  - Precision Issues
  - Taking a screenshot
  - Prevent the Canvas Being Cleared
  - Get Keyboard Input From a Canvas
  - Use WebGL as Background in HTML
  - Cross Platform Issues
  - Questions and Answers
  - Attributes
  - Texture Units
  - Framebuffers
  - readPixels
  - References
  - Документация по вспомогательным функциям
  - TWGL, лёгкая библиотека-помощник для WebGL
  - github
  Похожие публикации: