Отобразить "свой" <div> "поверх" любого содержимого

@ИмяПользователя · Регистрация: 02.04.2015

Студворк — интернет-сервис помощи студентам

Добрый день.
Необходимо вывести некий <div class="new_button_border"> в "фиксированном" месте на странице, что бы он всегда был "поверх" остального содержимого страницы.
Пока что в css написал так:

CSS
1
2
3
4
5
6
7
8
9
.new_button_border{
    width: 500px;
    height: 259px;
    margin-left: 150px;
    border: 1px solid black;
    position: fixed;
    bottom: 0px;
    right: 0px;
}

На "простой" странице "всё" отобразилось в правом нижнем углу, т.е. - так как нужно.
При добавлении этого дива на "пустой стандартный макет" opencart2.1 - его перекрывает карусель вверху страницы, и вторая карусель - внизу страницы.

Скорее всего там есть какая-то js функция, которая "вытаскивает" контент своей карусели поверх всего остального содержимого.

Так вот, мне нужно уметь "конкурировать" с любым подобным поведением и ВСЕГДА отображать свой <div> в правом нижнем углу экрана (кнопка "закрыть" есть и она рабочая) поверх любого другого содержимого...

В какую сторону копать?

PS. Могу добавить произвольный js код, могу менять css так, как нужно. Не могу влиять на очередность загрузки скриптов и стилей: модули могут быть разные, добавляться в любой последовательности, соответственно - загрузка будет происходить в "случайном" порядке, а значит мне, скорее всего, необходимо какое-то событие окна, по которому я буду "вытаскивать" свой <div> на передний план...

Вот только какое событие ловить и какое свойство css необходимо переопределить, что бы блок снова "поднялся" из заднего плана?

@Lazy_Den · 26.09.2017, 11:03

ИмяПользователя, маловероятно, что плагины для OC будут высчитывать слои всех элементов на странице. Многовато чести для такой [цензура] CMS, как OpenCart

Попробуйте поставить z-index побольше:

CSS
1
2
3
4
.new_button_border{
    /* другие стили */
    z-index: 99999;
}

@ИмяПользователя · 26.09.2017, 11:06 **[ТС]**

Уж я не знаю, что там за [цензура] проскочила, но спасибо!
z-index сработал!

@ИмяПользователя · 10.10.2017, 15:07 **[ТС]**

Ожившая тема!
И снова здравствуйте!
Суть: на момент написания/тестирования на "голом" шаблоне всё работало именно так, как и требуется: при загрузке страницы мой div отображался справа внизу страницы, "висел" над другими элементами формы и не скролился, при прокрутке страницы вниз (страница прокручивалась под div'ом).
Вот текущий вариант стилей:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
.new_button_border{
    width: 500px;
    height: 259px;
    margin-left: 150px;
    border: 1px solid black;
    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
    z-index: 99999 !important;
}

Но! При установке на сайт выяснилось, что используется другой модуль (некий Journal), который, судя по всему, вживляет плитку товаров сразу под хедер окна. Высота вживляемого блока около 2'х страниц. Примерно на столько, в результате, сдвигается и мой блок с кнопкой.

Вопрос: как "поднять и зафиксировать" div, что бы никакие сторонние javascript'ы не смогли его сместить? Возможно: самому стоит "перетрусить" структуру DOM документа и "вживить" свой див куда-то в header?

Как "обновить" положение блока, т.е. может можно "поднять" его, задав новые координаты после загрузки сторонних модулей?
Я пробовал добавить обработчик document.addEventListener("DOMContentLoa ded", ready); в котором "перечитывал" свой файл стилей - результата не дало. Блок остался висеть где-то в районе "третьего экрана вниз"...

Подумываю добавить setInterval, и в нём проверять реальную координату блока, если отличается от заданной - переустановить... как это можно корректно сделать? Какие свойства нужно задать заново и почему изначально так получается, что блок с

CSS
1
2
3
4
    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
    z-index: 99999 !important;

оказывается где-то "глубоко"?!

@AlexZaw · 10.10.2017, 15:40

как вариант попробовать перенести ваш див в <body>перед хедером

@ИмяПользователя · 10.10.2017, 16:20 **[ТС]**

Боюсь загадывать, но по моему - получилось вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    function ready(){
        var new_button_border = document.getElementById('new_button_border');
        if(screen.width < 720){
            new_button_border.style.display = 'none';
            return;
        }
        var body = document.querySelector('body');
        var header = document.querySelector('header');
        body.before(new_button_border, header);
    }
 
    document.addEventListener("DOMContentLoaded", ready);

Сейчас еще пару раз "проверю"... скажите, а как 2'м ответам в ветке поставить статус "Ответ помечен автором или модератором как правильный"??! )))))

Добавлено через 7 минут
Нет! Не совсем: теперь у меня "разрыв" на странице!
Между реальным хедером и тем самым блоком Jornal пустота по высоте моего дива.

Див - да, там где нужно, и при скроле страницы вниз - остается на "своём месте"... вот только и остальные блоки в месте вставки съехали ниже на его же высоту...

Как с одной стороны "вырвать" из потока свой див, а с другой - оставить его на "своём месте"??! (((

@AlexZaw · 10.10.2017, 17:19

А физически в хтмл нельзя див перенести? Если же все таки с помощью скриптов, то копайте в сторону .detach , .remove ,
.append , .prepend

@ИмяПользователя · 10.10.2017, 17:47 **[ТС]**

Сообщение от AlexZaw

А физически в хтмл нельзя див перенести?

- Идея какая: "строим модуль", который будет устанавливаться на "любой" opencart 2.x, не зависимо от предустановленных там модулей и расширений.
Так как (как в этом конкретном случае), предугадать поведение стороннего разработчика не возможно, то и вносить свои правки в ядро, в надежде, что они там приживутся - уже несколько раз пробовали... Жизнь - удивительная штука, а теория вероятности летит к чйёрту и опровергает саму себя просто!! )))

Поэтому пытаюсь "отвязаться" от внедрения своего кода (любого) в системные файлы, и обойтись сугубо "рекомендованным" набором из своих собственных html + css + js (+php, ессесно)...

Сообщение от AlexZaw

копайте в сторону .detach , .remove ,.append , .prepend

- Спасибо, взял совочек - побрёл в песочницу... авось чё не шибко вонючее нарыть удастся ))

@ИмяПользователя · 16.10.2017, 11:58 **[ТС]**

Дык вот, если взглянуть на мой же последний пример и подумать, то станет ясно, что вставка элемента происходила "мимо". Отсюда и появлялся отступ с разрывом на странице!
В итоге переписал пример вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    function ready(){
        var new_button_border = document.getElementById('new_button_border');
        if(screen.width < 720){
            new_button_border.style.display = 'none';
            return;
        }
        var body = document.querySelector('body');
        body.before(new_button_border, document.body.firstChild);
    }
 
    document.addEventListener("DOMContentLoaded", ready);

Всё работает так, как и предпологалось: Всем спасибо!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@ИмяПользователя 29 / 26 / 18 Регистрация: 02.04.2015 Сообщений: 316
	26.09.2017, 11:06 [ТС]
	Уж я не знаю, что там за [цензура] проскочила, но спасибо! z-index сработал! 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.10.2017, 15:40
	как вариант попробовать перенести ваш див в <body>перед хедером 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.10.2017, 17:19
	А физически в хтмл нельзя див перенести? Если же все таки с помощью скриптов, то копайте в сторону .detach , .remove , .append , .prepend 1

Отобразить "свой" <div> "поверх" любого содержимого

Решение