Первый див поверх второго, и теперь во втором элементы не кликабельны, как исправить?

Question

[Антон Вебсайтовский]

Первый див я пометил 1), это верхняя часть и слева, меню, логотип, кнопки.
Див второй, в нем элементы 2),3),4), они кликабельные, полностью как идет каждый элемент вся его область кликабельная, так у всех трех.
Первый див сделал через z-index, поверх второго, чтобы было видно элементы, все получилось и элементы в первом див кликабельные, меню, лого и т.д, но теперь во втором диве где идут элементы 2),3),4), не кликабелен.



Сделал пример:
https://codepen.io/AXOT/pen/xxNYVam

Answer 1

[Ankhena]

pointer-events

Comments

[Антон Вебсайтовский]

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

Сделал пример:
Вместо фоток, я просто разным цветом сделал эти блоки три в ряд на всю страницу, вот они кликабельны при клике. Это если 1) блок не стоит поверх, а как щас стоит, они не кликабельны.
https://codepen.io/AXOT/pen/xxNYVam

[Антон Вебсайтовский]

Перефразировал задание, а то было сложно понять.

[Ankhena]

Антон Вебсайтовский, ответ-то не меняется.
Если нужно сделать что-то прозрачным для клика, используйте pointer-events.

Но тут можно задать и другой вопрос, зачем там вообще абсолюты.
Грид и вперед. Можно с сабгридом. Вообще красивенько будет.

[Антон Вебсайтовский]

Ankhena, ну абсолют, чтоб поверх сделать пункт 1), гридом не сделаешь же так.

[DIVSIDE]

Перефразировал задание, а то было сложно понять

начните с адекватной разметки... сейчас это жопа какая-то. У вас изначально полное непонимание как работает верстка и блочно-строчной системы.

гридом не сделаешь же так

Еще как сделаешь. Грид прекрасно может располагать элементы прямо как абсолют, но не выводя элемент из потока. Но тут абсолют не нужен.

[Ankhena]

DIVSIDE,

Еще как сделаешь

♥

К фразе про жопу тоже сердечко. Но в данном случае это не поможет. Я уже лет 5 про это говорю :)

[szQocks]

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

[Антон Вебсайтовский]

szQocks, давай сравним твои и мои работы, раз уж ты такой спец, что обращаешь внимание на название классов.
И поднимем тему, по твоему все кто задают вопросы, они просто для себя делают что-то, я думаю их малый процент 10% макс, большая часть делают что-то для других, сталкиваются с реализацией какой-то части сайта, задают вопрос тут, более опытные подсказывают.

[Антон Вебсайтовский]

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

А у тебя в примере, просто одна часть не прикасается другой.

[Антон Вебсайтовский]

Ankhena, пора научиться мыслить шире.

[Ankhena]

Антон Вебсайтовский,

пора научиться мыслить шире?

Так и я к тому же.
Но тут даже не про шире, а про базовые понятия html и css.

Я вам ответ как сделать блок прозрачным для клика - вы мимо. Даже прочитать справочник и применить не в состоянии. Причем, не в гугл отправила, прям ссылку дала куда читать.
Все предыдущие ответы, пока не разжуешь и на блюдечке не принесешь - мимо.

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

И нормально в чем-то не разбираться, быть новичком, просить советы.
Так вы их не слушаете.
Ещё и хамить себе позволяете.

Может, пора изучить гриды?
Ну в самом деле?
Там сетка 4х2 и накладывайте свои элементы как угодно.
Два псевдика с картинками, левый 2x2, правый 1x2.
Левая панелька 1x2.
Список с типами жилья 3x1 и сабгрид.

Можно с сеткой 3x2. Но придётся разбивать список.

[Антон Вебсайтовский]

Изначально так и хотел сделать, но думал есть метод более современный, ну да ладно ), вообщем каждый объект который поверх идти должен я применил к нему z-index, не к блокам, которые перекрывали, а именно к элементам внутри.

Решение простое

.poverx {
	position: absolute;
	width: 100%;
}
.poverx > div:first-child a,
.poverx > div:first-child p,
.poverx > div:first-child span,
.poverx > div > div:first-child a,
.poverx > div:last-child > div a,
.borbtt {
	position: relative;
	z-index: 9000;
}

https://codepen.io/AXOT/pen/xxNYVam

[Ankhena]

Антон Вебсайтовский, есть более современный способ - это гриды.
pointer-events в общем-то тоже ни разу не устарел.

А вот z-index 9000 - вот это трындец, извините за выражение.

[Антон Вебсайтовский]

Ankhena, я так и не понял насчет pointer-event, пытался чет сделать, но так и не дошло.
z-index - хорошо, что старое работает везде )

[Ankhena]

Антон Вебсайтовский, может, вам пойти поучиться куда-нибудь. Студенты решают аналогичные задачи через два месяца обучения с нуля. Два месяца. Потом ещё на адаптив столько же. Но тут у вас не полный ноль. Но полезные приемы узнаете. Разжуют.

Гриды на коленке. Разумеется нужно доработать.
https://jsfiddle.net/d2mnfq7o/

[szQocks]

Антон Вебсайтовский, вот тебе ещё 1 вариант, надеюсь этого хватит для твоей задачи, а на счёт сверять проекты то ты уже победил по всем фронтам на автомате со своим кодом

.poverx {
	position: absolute;
	width: 100%;
}
.poverx > div:first-child a,
.poverx > div:first-child p,
.poverx > div:first-child span,
.poverx > div > div:first-child a,
.poverx > div:last-child > div a,
.borbtt {
	position: relative;
	z-index: 9000;
}

https://codepen.io/kapysta-xxl/pen/LYoQmEb

P.S если тебе не понравиться то что текст вилла при адаптиве не удерживается в пропорциях на месте, ответ сразу могу дать - мне глубоко насрать на это, гриды в помощь, ну и лучше этой 4х2 сделать как выше и написали

[Антон Вебсайтовский]

Ankhena, Хочешь сказать вот так делать это уровень?

<ul class="social">
      <li class="social__item"><a class="social__link" href="">f</a></li>
      <li class="social__item"><a class="social__link" href="">i</a></li>
      <li class="social__item"><a class="social__link" href="">t</a></li>
    </ul>

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

Разве тег (a) не говорит, что это кнопка или ссылка, зачем писать линк и т.д

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

class="social__item" - зачем? мы ведь и так понимаем, что каждый (li) это отдельная часть.
Надеюсь я дал понять, почему я верстаю по другому, я изначально так и делал, но с опытом я понял, что класс не нужно пихать в каждый тег.

[Антон Вебсайтовский]

szQocks, Спасибо насчет гридов.
А с этого hero__item hero__item--s, я поржал ) в каждом диве класс ) зачем )

[Антон Вебсайтовский]

szQocks, Применил для теста курсор, чтоб посмотреть где будут кликабельны те самые три блока, так в твоем примере и розовый блок слева почему-то тож зацепило ), так как он входит у тебя туда, куда не должен ходить ) а я сижу и думаю, что он там делает, что это вообще _)

[Антон Вебсайтовский]

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

[szQocks]

Антон Вебсайтовский,

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

это не работает - с твоим подходом, если бы ты туда куда-то надо сделал для текста курсор - всё сработало бы хорошо

даже те события клика которые ты описал в jq, можно их тоже сделать но в сетке 3х3, точнее в двух сетка по 3 колонки ну не суть, придётся сразу двум блокам давать классы для изменения ширина а не для одного

[szQocks]

Антон Вебсайтовский, да и вообще мог бы сразу идти на фриланс, как обычно просить сверстать что-то за бесплатный отзыв вхаха) шут гороховый

[DIVSIDE]

Антон Вебсайтовский,

давай сравним твои и мои работы

Друг, тут нечего сравнивать. По твоей вёрстке и твоему вопросу всё видно.
Откровенно: Это не вёрстка, это кусок говна сделанный в подвале, ногами "на коленке". И тебе 3 человека об этом говорят, включая спеца Ankhena который себя зарекомендовал на этом сайте уже как лет 5.
+ нормально описать не можешь что тебе надо. Тебе описали как сделать то что ты хочешь + показали. А ты не смог даже понять что там сделано. Ты не знаешь гридов, это мы уже поняли.

----

А у тебя в примере, просто одна часть не прикасается другой

Наверно потому что я указал gap, чтобы ты видел что это отдельные части...не?
В чем проблема взять, и сделать так для грида, и так для флекса? Разжёвано лучше некуда. Даже специально цветом выделил и границы показал, чтобы ты понял и тебе легче было. Но ты не понял.

----

это же уровень школьников, без обид, каждый верстает так как хочет

Это не мне написали, но владение БЭМ - да, это уровень. И он куда шире. Верстать надо не "как хочешь", а как правильно. Чтобы потом это спокойно поддерживать. А твой код тупо прочитать и понять сложно. Какая тебе вёрстка. Ты называешь себя студией а говоришь что БЭМ это фигня и в 2024м не знаешь гридов... Друг, тебе тогда на кассу в пятёрочку, а не сайты делать

----

class="social__item" - зачем? мы ведь и так понимаем, что каждый (li) это отдельная часть.

Затем, что это правила БЭМа. Которых ты точно не знаешь.
hero__item hero__item--s Это типо модификатор? А ничего что он должен давать нам понимание о чем идет речь? Если S - это размер, то должно быть так,hero__item hero__item--size--s, или так hero__item hero__item_size_s. В зависимости от того, какую схему БЭМа выбрали. Классическую или альтернативную

Вот, почитай на досуге. БЭМ


Финальный вывод: Ты задаешь вопрос не чтобы понять, а чтобы получить готовое решение. Получая дельные советы - ты тупо не можешь их применить потому что банально не знаешь вёрстку. И это видно. И после такого называть себя "студией".. ну-ну.

Не можешь? Не справляешься? - Отдавай тем кто умеет и плати бабки. Ах да, это же твой "заказ"...

ДАЙ МАКЕТ, И ВСЕ ЗДЕСЬ ПРИСУТСТВУЮЩИЕ ЗАВЕРСТАЮТ ЭТО ЗА 10 МИНУТ.
Вот и посмотрим кто по итогу прав

[Ankhena]

Антон Вебсайтовский,

Модно было через один класс social, назначить остальным стили.

Ох
Да.
А можно пойти и почитать как браузер обрабатывает селекторы.
.link - браузер ищет все классы применяет стили. Всё легко и просто.
.block a - браузер проверяет всё ссылки на странице и у каждой из них проверяет вверх по дереву есть ли родитель с классом block. Если его нет, он каждый раз доходи до верха дерева.
На простых страницах трудозатраты на это ерундовые, а если страничка чуть посложнее и побольше узлов, получаем лишнее время.

[Ankhena]

Антон Вебсайтовский,

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

Да, это уже тут все поняли, что вы верстаете по-другому.

И да, ваш подход был действительно популярен лет 15 (или уже20?) назад.

[Ankhena]

Антон Вебсайтовский,

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

Где у вас не везде кликабельность?
Кнопка не на всю ячейку растянута?
Ну напрягитесь, растяните самостоятельно.

[Антон Вебсайтовский]

DIVSIDE, а ты понял смысл БЭМА? он не дает ни какие плюсы, если только для новичков, которые еще не научились понимать толком код и им нужно видеть в каждом теге класс, им так проще.

Знаешь важный фактор? поисковые системы любят, когда больше контента чем кода, я думаю это важнее, чем писать по БЭМ, опытные понимают все на лету без лишних классов, щас куча инструментов, в браузере, нужный блок его класс, стиль, можно найти правой кнопкой мыши. Это же удобно.

[Антон Вебсайтовский]

Ankhena, Да я уже сделал, я же писал, и показал работу.

[Антон Вебсайтовский]

Ankhena, Да елки палки, раньше и пихали классы в каждый тег, так как css не был развит на столько и по другому не делали, но можно делать проще, я пришел к этому, я так и верстаю. Щас и классов меньше использовать надо, но надо чаще применять новшества, использовать, писать, а то я часто использую что-то не современное, но зачастую это помогает в решение не стандартных задач.

Мне очень нравиться код, когда смотришь, и не видишь много классов, я использую логику, где можно не вставлять класс, я не вставляю.

[Ankhena]

Антон Вебсайтовский, обращение только по классам это лишь маленькая часть концепции БЭМ.

Основная суть в выделении и переиспользовании блоков. Второй, важный аспект это именование классов так, чтобы любому человеку было сразу понятно о чем речь.
Ваши "qefvu" понятны только вам. Не знаю, долго ли они понятны. Этим вы затрудняете вход в проект для других разработчиков. Т.е. вместо того, чтобы приносить клиенту пользу, делаете ещё хуже.

Про селекторы с вложенностью больше 2-3 это моветон - ещё один из признаков говнокода.

Но нравится - пишите. Это же демонстрация вашего профессионализма.

[DIVSIDE]

Антон Вебсайтовский, БЭМ использует весь мир, а Антон самый умный :D

[Антон Вебсайтовский]

DIVSIDE, Да нет, почему, просто я к названием классов и т.д, отношусь по другому, я еще начинал с дреамвивера, там слева код, срава видишь сайт, раньше так работал, щас просто код вижу, лет 20 уже прошло ), когда еще модем был диалап ), еле все грузилось, я тогда пробовал на html химичил так скажем ), и когда работаешь, то понимаешь, что реально нужно, а что нет, вот я и пришел к такой модели, почему классы можно не пихать в каждый див, и почему можно писать что угодно, название все равно тебе толком ничего не скажет, ты ведь и так по контенту понимаешь, что там, щас проще в браузере на правую кнопку мыши инспектора открыть на данном блоке и т.д и увидеть класс, и далее скопировать и пойти в css найти, ну это если нужно стили поправить.

Логику надо иногда применять )

То как я вижу, ну открыл я index,html, к примеру, спустился к блоку в котором мне надо поменять что-то в стилях, вижу у него класс menu, или mn, ну не важно или mn100, мне название ничего не даст, я же и так вижу, что там, один фиг я тупо копирую класс и ищу в css и меняю стили. Как не назови ) смысл один, а вообще обычно так делают если пишут 1, то первый типа, если 50 или 100, то обычно это %, ну или px, я про название классов, up, verx, top, верх, center и так понятно и т.д.

Ребята, вот почему у меня нет проблем с классами, я не читаю что там написано, сути не имеет, я смотрю на вложенность, и если надо менять стиль, я копирую и ищу в css. Находясь на сайте в редакторе, я и так понимаю где я примерно нахожусь, верх это или низ или центральная часть. Я пришел к этому всему через свой личный опыт, знаете как бывает, вот делаешь одно и тож миллион раз, а на миллион первый, думаешь, о а можно же проще. И начинаешь упрощать какие-то моменты, чтоб удобнее работалось.

Вообщем для вас придумали бутстрапы, это то что я вообще не люблю.

Можно свой фраемворк на css сделать, их же готовых гора.

[Антон Вебсайтовский]

Ankhena, про селекторы, имеешь виду слайдеры страницы? типа больше 2-3 уже не хорошо. Так называемые экраны. Или ты про page6bl > div > div:last-child, но так можно верстать, почему нет.

[Ankhena]

Антон Вебсайтовский,

но так можно верстать, почему нет.

Потому что так работают селекторы.

ну открыл я index,html

Так и не надо в него смотреть. Если классы нормально названы.

Антон, это спор не имеет смысла.

Ваше развитие действительно идёт. И таким способом до которого вы развились, действительно верстали. Вы говорите всё верно. Но лет 15 назад. И все (и я, в том числе, тоже так делала) прошли этот этап и пошли дальше, а вы остались там.

Ребята, вот почему у меня нет проблем с классами

Так мы понимаем, что у вас нет. Они есть у всех, кому достаются ваши проекты потом. Конечно, они справятся, но проклинать и думать "ну что ж за урод это писал" будут на каждом шагу. И да, вы об этом не узнаете. Точнее уже не узнали и хотите продолжать не знать, не думать об этом и плевать на всех, кто после вас.
Вам насрать => говнокод и выходит.