WedX - журнал о программировании и компьютерных науках

Как сделать так, чтобы Div отображался поверх всего остального на экране?

Отредактируйте, чтобы открыть повторно:

Кажется, сложно расположить элементы на карте Google. Использование z-индекса не решает проблему, описанную ниже: Карты Google останутся поверх некоторых других элементов даже при использовании высоких z-индексов.

Вопрос:

Можно ли использовать элементы обложки div на карте Google?

У меня появляется следующее всплывающее окно:

введите описание изображения здесь

Но когда я перемещаю это всплывающее окно, чтобы оно появилось на карте, оно скрывается:

введите описание изображения здесь

Как заставить что-то быть самым верхним, всегда отображаемым объектом на экране?

Я попытался установить z-index в моем листе свойств CSS, но это не сработало.

Есть ли какое-то свойство HTML / CSS, которое я могу установить, чтобы всплывающее окно, которое является DIV, на самом деле всегда устанавливалось поверх всего остального?

html css z-index popup
10.09.2013

  • Что такое z-index для карты и z-index для всплывающего окна? 11.09.2013
  • @ SiKni8 MAP: -webkit-transform: translateZ (0); всплывающее окно: z-index: 100000; 11.09.2013
  • Это происходит с каждым браузером? 11.09.2013
  • @ SiKni8 пробовал только хром лол 11.09.2013
  • Многие люди жалуются на некорректную работу кода в разных браузерах. Не то чтобы ваш код неправильный, но разные браузеры по-разному интерпретируют определенные разметки. Попробуйте использовать IE и FF и сообщите нам, что произойдет. 11.09.2013
  • Положение вашего всплывающего окна: статическое, абсолютное или относительное? z-index игнорируется, если он статический или не установлен. 11.09.2013
  • относительное положение и индекс z установлены на 9999999999999999999999999999999999999999999999999. в хроме. все еще скрыт за картой 12.09.2013
  • Вы уже нашли решение? Такая же проблема здесь, в Chrome 22.08.2014
  • @LexPodgorny Нет, сэр, пока нет ответа. Я думаю, что происходило то, что ставка была дочерним элементом сетки. Если бы мне пришлось повторить это, я бы установил div меню вне всего остального и разместил бы его по абсолютным значениям там, где он мне нужен, тогда, если бы размер экрана был изменен, мне пришлось бы повторно вычислить, где его разместить. 03.09.2014
  • См. Также stackoverflow.com/q/2006134/32453 14.10.2016
  • @rogerdpack lil поздно там билли 14.10.2016
  • @ jordan.peoples да, Google привел меня прямо сюда, поэтому подумал, что добавлю ссылку для подписчиков на случай, если они захотят увидеть больше связанных ответов :) 14.10.2016

Ответы:


1

z-index не такой уж и простой друг. На самом деле не имеет значения, поставили ли вы _2 _..... Но имеет значение, КОГДА вы дали ему это z-index. Различные dom-элементы также имеют приоритет друг над другом.

Я сделал одно решение, в котором я использовал jQuery для изменения элементов css и присвоил ему z-index только тогда, когда мне нужно, чтобы элемент был сверху. Таким образом, мы можем быть уверены, что z-index этого элемента был указан последним, и индекс будет отмечен. Это требует выполнения некоторых действий, но в вашем случае это кажется возможным.

Не уверен, что это сработает, но вы также можете попробовать указать параметр !important:

#desired_element { z-index: 99 !important; }

Изменить: добавление цитаты по ссылке для быстрого пояснения:

Во-первых, z-index работает только с позиционированными элементами. Если вы попытаетесь установить z-index для элемента без указанной позиции, он ничего не сделает. Во-вторых, значения z-index могут создавать контексты наложения, и теперь внезапно то, что казалось простым, стало намного сложнее.

Добавление z-индекса для элемента через jQuery дает элементу другой контекст стекирования, и, таким образом, он имеет тенденцию работать. Я не рекомендую это делать, но постарайтесь сохранить html и css в таком порядке, чтобы все элементы были предсказуемыми.

Предоставленная ссылка обязательна к прочтению. Порядок размещения элементов html и т. Д. Был тем, о чем я не знал, как начинающий программист, и эта статья прояснила это для меня довольно хорошо.

Ссылка philipwalton.com < / em>

25.06.2014

2

Вы используете position: relative?

Попробуйте установить position: relative, а затем z-index, потому что вы хотите, чтобы этот div имел z-индекс по отношению к другому div.

Кстати, вашему браузеру важно проверить, работает он или нет. Ни IE, ни Firefox не годятся.

10.09.2013
  • относительное положение и индекс z установлены на 9999999999999999999999999999999999999999999999999. в хроме. все еще спрятан за картой 12.09.2013
  • Вы уже нашли решение? Такая же проблема в Chrome 22.08.2014
  • @DivisionbyZero - я так и не нашел подходящего исправления для моей конкретной реализации, но я дал правильный ответ GotBatteries. Проверьте это, надеюсь, это поможет. 18.10.2017

    • 3

    Попробуйте установить абсолютное положение, т.е.

    #yourDiv{
    position: absolute;
    z-index: 10;
};
    28.12.2014

    4

    вы должны использовать position:fixed, чтобы z-index значения применялись к вашему div

    23.12.2015
  • Не только позиция: фиксированная, но ВСЕ позиции. Просто быть чистым 23.12.2015
  • я сказал, чтобы любой div отображался на любой глубине 24.12.2015
  • Все позиции, кроме дефолтной static. Чтобы было понятнее! 24.10.2016

    • 5

    Установите z-index DIV на единицу больше, чем другие DIV. Вам также необходимо убедиться, что для DIV также установлено position, кроме static.

    CSS:

    #someDiv {
    z-index:9; 
}

    Подробнее читайте здесь: https://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

    11.09.2013
  • относительное положение и индекс z установлены на 9999999999999999999999999999999999999999999999999. в хроме. все еще скрыт за картой. 12.09.2013
  • @ jordan.peoples пытается поместить z-index в оба div, но тот, который находится наверху, должен получить более высокий 02.05.2016
  • Мне же! относительное положение и индекс z установлены на 9999999999999999999999999999999999999999999999999. в хроме. все еще скрыт за картой. @Иордания 10.01.2020
  • @ Chen-CN Я так и не нашел подходящего решения для этого - мы использовали сайт, разработанный третьей стороной, в качестве базы кода, и они не справлялись с кодированием. В конце концов, я думаю, было решено, что страница была разделена на две панели или окна или что-то в этом роде, поэтому все, что создано в одном разделе, должно было жить там - так что мы закончили дерьмо, консервировав этот код и сделав всплывающее окно дочерним элементом карты или что-то вроде тот 11.01.2020

    • 6

    Одна из форм для этого - вставить панель, которую вы хотите развернуть, внутри DIV, установленного как относительный: позвольте мне показать вам:

    <div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
</div>

    Вы используете первый div для размещения внутреннего содержимого в определенной области внутри вашей страницы, а второй абсолютный должен относиться к контейнеру (потому что является относительным). Z-index в этом случае также относится к контейнеру, и если он выше, чем контейнер должен быть наверху. Вы можете поместить стиль в класс CSS и изменить размер абсолютного div, чтобы расширить его при наведении курсора или другом действии, которым вы хотите управлять.

    Я надеюсь, что это поможет

    30.04.2015

    7

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

    11.09.2015
  • Можете ли вы использовать -1, z-index или любой другой метод, чтобы не отображать раскрывающиеся списки в фоновом режиме, единственный способ - скрыть их, когда вы хотите что-то показать, 27.10.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    © 2024 wedx.ru, WedX - журнал о программировании и компьютерных науках
    Для любых предложений по сайту: [email protected]