ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Поисковой ресурс

Проект от команды FD

Спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Небольшие изменения в разделе техподдержки. Какие? - Читайте тут!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Бесплатная техническая поддержка » Значение z-index при активации элементов внутри селектора


Значение z-index при активации элементов внутри селектора

Сообщений 1 страница 5 из 5

1

Всё-таки я застряла с z-index(
Вопрос по расположению объектов друг над другом. Помощь требуется не по форумной платформе, а просто по верстке. Буду благодарна за любую помощь!
Ссылка на гитхаб

Для вызова меню выбора объекта, необходимо кликнуть на данные области:

При выставлении приоритетов по отображению блоков, приоритеты подчиняются правилу внутри блока, но не за его пределами. Например, id="ran" и id="ran2" имеют значения:

Код:
#ran {
  z-index: 5;
}

 #ran2 {
  z-index: 4;
}

У #ran приоритет выше, блок отображается над #ran2. Но внутри каждого блока есть активные элементы, которые при активации также обладают приоритетностью. И проблема состоит в том, что данный приоритет не является абсолютным для родительских блоков и действует только внутри своего id.
Это пол беды((((
Из-за наложения друг на друга, объекты частично становятся не кликабельны, что не позволяет вызвать панель со слайдом. Думаю, сделать кнопки для вызова действия у каждого id, но не знаю, как привязать их к этой самой кнопке))
В теории, привязав их можно будет управлять ими отдельно, но из-за сохраняющейся проблем с z-index в описании выше, проблемы это не решит.

Пример по расположению объектов (1-5 от приоритетных элементов)

Как должно работать:
В каждом блоке #ranN находится слайд с элементами, которые должны накладываться друг на друга в определенном порядке. Прически наивысший по приоритетности блок, далее идет верхняя и нижняя одежда, далее обувь/чулки/лицо. Но независимо от приоритетности блоков, каждая из областей должна быть кликабельная для активации слайда с выбором другого объекта в активированном элементе.

Буду благодарна за любую помощь. Может есть вариант переписать сам скрипт под что-то более удобное в плане управления. Текущий я адаптировала под себя, писала его не сама.

Подпись автора

https://nick-name.ru/forumt4/forrkass.gif
Гость, я хочу вас спросить, как художник художника: вы рисовать умеете?
Остап Бендер

+2

2

#p168514,forrkass написал(а):

Из-за наложения друг на друга, объекты частично становятся не кликабельны, что не позволяет вызвать панель со слайдом. Думаю, сделать кнопки для вызова действия у каждого id,

Есть такое css-свойство, которое может делать элемент прозрачным для кликов(Возможно поможет в решении проблем ?)

pointer-events:none;

Тестовый пример:

Код:
[html]<div style="width:100px;height:100px;background:green;pointer-events: none;position:relative;z-index:100" onclick="alert(111)"></div>
<div style="width:100px;height:100px;background:red;margin-top:-100px;" onclick="alert(222)"></div>[/html]

[html]<div style="width:100px;height:100px;background:green;pointer-events: none;position:relative;z-index:100" onclick="alert(111)"></div>
<div style="width:104px;height:104px;background:red;margin-top:-102px;margin-left:-2px" onclick="alert(222)"></div>[/html]

вот под зеленым элементом расположен красный,
Поскольку события мыши на зеленом отключены - кликается красный(вызывает alert(222)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

+3

3

Отвечу кратенько, без конкретного кода, что бы была понятная идея, куда можно копать.

Проблема с кликами при перекрытием областей - это крайне типичная для HTML проблема, так как HTML и CSS используют Box Model, в котором все объекты прямоугольники. Решений у этой проблемы несколько, лично я для себя решил, что SVG может быть подходящим решением. Сейчас у меня это выглядит так (обрати внимание на равнину в центральной части карты и 2 внутренние области: скалу и пруд). Единственное: у меня SVG намеренно выделен в отдельный файл, что не обязательно, можно описывать всё прямо внутри HTML (см. Inline SVG). Интерфейс выбора можно не трогать, а то, что снизу...

А в самом SVG можно сделать следующую иерархию

  • В <defs> описываем все доступные элементы во все слоты "экипировки", у каждого свой ID, можно добавить и обычных классов, что бы проще выбирать список, условно, брюк. Этот элемент не рендерится напрямую, так что может быть и свалкой.

  • Выше (то есть далее по коду) слой (<g>) в котором собирается модель персонажа. Здесь каждый элемент экипировки собирается как набор ссылок на предметы (см. <use>). Этот слой только для отображения.

  • Ещё выше - слой активных областей. Сюда ты добавляешь несколько элементов <path>, каждая из которых описывает сложную область (многоугольник и кривую Безье) каждого элемента экипировки (ноги, туловище и т. д.) в нужной форме. Для каждого такого <path> можно задать все стандартные события (click, hover...) всеми типичными для HTML способами (Element.addEventListener, jQuery.on и т.д.).

У меня дополнительно реализована подсветка при нажатии и наведении элементов. Для этого в дополнительным невидимом слое при помощи всё тех же <use> я создаю чёрно-белую схему, которая после накладывается маской (см. <mask>) на слой отображения (в моём описанном примере выше это средний слой).

+4

4

#p168517,Deff написал(а):

Есть такое css-свойство, которое может делать элемент прозрачным для кликов(Возможно поможет в решении проблем ?)

Именно это свойство оказалось решением проблемы! Спасибо огромное))) Всё поставила, всё работает)
:cool:

Подпись автора

https://nick-name.ru/forumt4/forrkass.gif
Гость, я хочу вас спросить, как художник художника: вы рисовать умеете?
Остап Бендер

+2

5

#p168518,kozhilya написал(а):

Отвечу кратенько, без конкретного кода, что бы была понятная идея, куда можно копать.

Спасибо за идею, она интересная для реализации, но очень тяжелая для мобильных устройств.
Пользователи будут в основном с мобильными устройствами, а с телефона это будет очень тяжелый код. Я с телефона карту так и не открыла  :rolleyes:
Но я себе на заметку возьму идею для чего-нибудь интерактивного в будущем)))

Подпись автора

https://nick-name.ru/forumt4/forrkass.gif
Гость, я хочу вас спросить, как художник художника: вы рисовать умеете?
Остап Бендер

+1


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Бесплатная техническая поддержка » Значение z-index при активации элементов внутри селектора